Waft-UI组件库 - Swiper轮播 - 《Waft - 开发者文档》

引入
代码示例
refs 代码示例
- css
- json
- ts
API

waft>=0.7.x waft-ui>=0.2.x

引入

{
  "usingComponents": {
    "x-swiper":"waft-ui/assembly/swiper/swiper"
  }
}

代码示例

<x-swiper ref="swiper" loop="{{ true }}" autoplay="{{ true }}" count="{{ list.length }}" defaultIndex="{{ 0 }}" indicatorsPosition="right">
  <view class="swiper-item" a:for="{{ list }}">{{ item.name }}</view>
</x-swiper>

refs 代码示例

axml 代码

<x-swiper ref="component_ref" count="{{ 4 }}" loop="{{ true }}" autoplay="{{ true }}" defaultIndex="{{ 0 }}" indicatorsPosition="right">
<view style="width: 100%;height: 100%">1</view>
<view style="width: 100%;height: 100%">2</view>
<view style="width: 100%;height: 100%">3</view>
<view style="width: 100%;height: 100%">4</view>
</x-swiper>

TS 代码 ```typescript import {Page, Props } from ‘waft’; // 不然不能成功转成 Swiper 实例, 调用 Swiper 方法 import { Swiper } from ‘waft-ui’; import { refs } from ‘waft-ui-common’;

export Test extends Page { constructor(props: Props) { super(props);

this.addEventListener('xxx', () => {
    // 注意, refs 实例是在组件 willMount 生命周期挂载的, 注意调用时机, 早于组件 willMount
  // 生命周期之前获取组件实例可能会获取不到
  if (refs.get('component_ref') instanceof Swiper) {
      const instance = refs.get('component_ref') as Swiper;

    // 控制轮播图 上一页
    instance.prev();
    // 控制轮播图 下一页
    instance.next();
    // 控制轮播图 跳到指定位置
    instance.swipeTo(3);
  }
})

} }

<a name="fAiKz"></a>
### 效果展示
![swiper.png](https://cdn.nlark.com/yuque/0/2021/png/327148/1630577172846-fb2dc307-61e0-4995-b5cd-fcf243c544a8.png#clientId=ud28402b3-2edc-4&crop=0&crop=0&crop=1&crop=1&from=ui&id=ue1ea841d&margin=%5Bobject%20Object%5D&name=swiper.png&originHeight=800&originWidth=1280&originalType=binary&ratio=1&rotation=0&showTitle=false&size=21339&status=done&style=shadow&taskId=u455bd159-40df-43dc-960e-1f6b980748b&title=)
<a name="bhxMx"></a>
### 组件样式
<a name="A5dzP"></a>
#### axml
```html
<view class="test-swiper">
  <x-nav-bar showArrow="{{ true }}" title="测试 swiper 组件"></x-nav-bar>
  <view style="height: 30rpx"></view>
  <x-scroll>
    <view class="content">
      <h3>指示器位置</h3>
      <view class="swiper">
        <x-swiper ref="swiper" loop="{{ true }}" autoplay="{{ true }}" count="{{ list.length }}" defaultIndex="{{ 0 }}" indicatorsPosition="right">
          <view class="swiper-item" a:for="{{ list }}">{{ item.name }}</view>
        </x-swiper>
      </view>
      <h3>自动轮播</h3>
      <view class="swiper">
        <x-swiper ref="swiper" loop="{{ true }}" autoplay="{{ true }}" count="{{ list.length }}" defaultIndex="{{ 0 }}">
          <view class="swiper-item" a:for="{{ list }}">{{ item.name }}</view>
        </x-swiper>
      </view>
      <h3>手动控制</h3>
      <view class="btns">
        <view class="btn" onTap="handlePrev">上一个</view>
        <view class="btn" onTap="next">下一个</view>
      </view>
      <view class="swiper">
        <x-swiper ref="swiper" loop="{{ true }}" autoplay="{{ false }}" count="{{ list.length }}" defaultIndex="{{ 3 }}">
          <view class="swiper-item" a:for="{{ list }}">{{ item.name }}</view>
        </x-swiper>
      </view>
      <view style="height: 100rpx;background-color: #00b3ff"></view>
    </view>
  </x-scroll>
</view>

css

.test-swiper {
    width: 100vw;
    height: 100vh;
    background-color: #E6F2FF;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.swiper {
    width: 800rpx;
    height: 500rpx;
}
.swiper-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00b3ff;
    color: #FFFFFF;
    font-size: 48rpx;
}

.btns {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20rpx;
    margin-top: 20rpx;
}
.btn {
    height: 40rpx;
    line-height: 40rpx;
    background-color: #00b3ff;
    border-radius: 5rpx;
    padding: 0 10rpx;
    margin-right: 20rpx;
}

json

{
  "usingComponents": {
    "x-nav-bar":"../assembly/nav-bar/nav-bar",
    "x-cell":"../assembly/cell/cell",
    "x-swiper": "../assembly/swiper/swiper",
    "x-scroll": "../assembly/scroll/scroll"
  },
  "state": {
    "list": [
      {
        "name": 1
      },
      {
        "name": 2
      },
      {
        "name": 3
      },
      {
        "name": 4
      },
      {
        "name": 5
      }
    ]
  }
}

ts

import {Page, Props, Element, ComponentProps, Component} from 'waft';
import { JSON, JSONObject } from 'waft-json';
import { Swiper } from '../../../assembly/swiper/swiper';
import { refs } from 'waft-ui-common';

export class TestSwiper extends Page {
  constructor(props: Props) {
    super(props);

    this.addEventListener('handlePrev', () => {
      console.log('====### 进入到了 上一个');
      if (refs.get('swiper')) {
        console.log('====### swiper 有值');
        if (refs.get('swiper') instanceof Swiper) {
          console.log('即将获取值');
          const target = refs.get('swiper') as Swiper;
          console.log('nodeId 是' + target.nodeId.toString());
          target.prev();
        }
      }
    });

    this.addEventListener('next', () => {
      const target = refs.get('swiper') as Swiper;
      target.next();
    });
  }
}

API

props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | autoplay | 是否自动播放 | boolean | true | | interval | 轮播间隔, 单位 ms | number | 2000 | | loop | 是否循环播放 | boolean | true | | count | 轮播的子节点数量, 必传!!!! | number | 1 | | active | 手动控制索引值 | number |
| | defaultIndex | 初始位置索引值 | number | 0 | | showIndicators | 是否显示指示器 | boolean | true | | indicatorsPosition | 指示器位置支持 center left right | string | center |
Events | 事件名 | 说明 | 回调参数 | | —- | —- | —- | | change | 每一页轮播结束后触发 | index 当前页的索引 | | touchStart | 开始滑动 swiper 的时候触发 | index 当前页的索引 |
slot | 名称 | 说明 | | —- | —- | | default | 轮播内容 ⚠️ 内容不会变化 | | indicator | 自定义指示器 ⚠️ 具名插槽不能设置默认内容 |
refs | 方法名 | 参数 | 说明 | | —- | —- | —- | | prev |
| 切换到上一轮播 | | next |
| 切换到下一轮播 | | swipeTo | index | 切换到指定的轮播 |