swiper

滑块视图容器，其中只可放置 <swiper-item/> 组件，否则可能导致异常。

属性名类型默认值说明最低版本
indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorStringrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorStringrgba(0, 0, 0, 0)当前选中的指示点颜色
autoplayBooleanfalse是否自动切换
currentNumber0当前选中滑块的index
current-item-idString""当前选中滑块的组件id，不能与current属性同时指定
intervalNumber5000自动切换时间间隔
display-multiple-itemsNumber1同时显示的滑块数量
durationNumber500滑动动画时长
circularBooleanfalse是否循环播放（首尾衔接）
verticalBooleanfalse滑块放置方向是否为竖直
bindchangeEventHandlercurrent 改变时会触发 change 事件，event.detail = {current: current, source: source}

change 事件的source字段表示导致改变的原因，可以有如下值：

  • autoplay 自动播放导致swiper变化
  • touch 用户划动导致swiper变化
  • 其他原因将用空字符串表示。

swiper-item

滑块视图内容。仅可放置在 <swiper/> 组件中，宽高自动设置为100%。

属性名类型默认值说明最低版本
item-idString""组件id

示例

  1. <view class="page-section">
  2.   <swiper indicator-dots="{{indicatorDots}}"
  3.     autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  4.     <block wx:for="{{background}}">
  5.       <swiper-item>
  6.         <view class="swiper-item {{item}}"></view>
  7.       </swiper-item>
  8.     </block>
  9.   </swiper>
  10. </view>
  11. <view class="page-section">
  12.   <view class="ttui-cells">
  13.     <view class="ttui-cell">
  14.       <view class="ttui-cell__bd">指示点</view>
  15.       <view class="ttui-cell__ft">
  16.         <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
  17.       </view>
  18.     </view>
  19.     <view class="ttui-cell">
  20.       <view class="ttui-cell__bd">自动播放</view>
  21.       <view class="ttui-cell__ft">
  22.         <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
  23.       </view>
  24.     </view>
  25.   </view>
  26. </view>
  1. Page({
  2.   data: {
  3.     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
  4.     indicatorDots: true,
  5.     vertical: false,
  6.     autoplay: false,
  7.     interval: 2000,
  8.     duration: 500
  9.   },
  10.   changeIndicatorDots: function (e) {
  11.     this.setData({
  12.       indicatorDots: !this.data.indicatorDots
  13.     })
  14.   },
  15.   changeAutoplay: function (e) {
  16.     this.setData({
  17.       autoplay: !this.data.autoplay
  18.     })
  19.   },
  20.   intervalChange: function (e) {
  21.     this.setData({
  22.       interval: e.detail.value
  23.     })
  24.   },
  25.   durationChange: function (e) {
  26.     this.setData({
  27.       duration: e.detail.value
  28.     })
  29.   }
  30. })

swiper - 图1

原文: https://developer.toutiao.com/docs/comp/swiper.html