原生小程序开发组件｜视图容器组件汇总（二）

swiper

滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。

属性说明

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	#666666	否	指示点颜色
indicator-active-color	color	#333333	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000	否	自动切换时间间隔，单位 ms
duration	number	500	否	滑动动画时长，单位 ms
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向
bind:change	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}
bind:animationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上

change 事件 source 返回值

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

值	说明
autoplay	自动播放导致 swiper 变化
touch	用户划动引起 swiper 变化
空字符串	其它原因

示例代码

TYML

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper
        indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}"
        circular="{{circular}}"
        vertical="{{vertical}}"
        interval="{{interval}}"
        duration="{{duration}}"
        >
        <block ty:for="{{background}}" ty:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="tyui-cells tyui-cells_after-title">
        <view class="page-cell tyui-cell_switch">
          <view class="tyui-cell__bd">指示点</view>
          <view class="tyui-cell__ft">
            <switch checked="{{indicatorDots}}" bind:change="changeProperty" data-property-name="indicatorDots" />
          </view>
        </view>
        <view class="page-cell tyui-cell_switch">
          <view class="tyui-cell__bd">自动播放</view>
          <view class="tyui-cell__ft">
            <switch checked="{{autoplay}}" bind:change="changeProperty" data-property-name="autoplay" />
          </view>
        </view>
        <view class="page-cell tyui-cell_switch">
          <view class="tyui-cell__bd">衔接滑动</view>
          <view class="tyui-cell__ft">
            <switch checked="{{circular}}" bind:change="changeProperty" data-property-name="circular" />
          </view>
        </view>
        <view class="page-cell tyui-cell_switch">
          <view class="tyui-cell__bd">竖向</view>
          <view class="tyui-cell__ft">
            <switch checked="{{vertical}}" bind:change="changeProperty" data-property-name="vertical" />
          </view>
        </view>
      </view>
    </view>
 
    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider value="{{duration}}" min="{{500}}" max="{{2000}}" bind:change="changeProperty" data-property-name="duration" />
      <view class="page-section-title">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider value="{{interval}}" min="{{2000}}" max="{{10000}}" bind:change="changeProperty" data-property-name="interval" />
    </view>
  </view>
</view>

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。    

JS

Page({
  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    circular: true,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0,
  },
  change: function (e) {},
  changeProperty: function (e) {
    var propertyName = e.currentTarget.dataset.propertyName;
    var newData = {};
    newData[propertyName] = e.detail.value;
    this.setData(newData);
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots,
    });
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay,
    });
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value,
    });
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value,
    });
  },
});

 

swiper-item

滑块视图容器子项，仅可放置在 swiper 组件中，宽高自动设置为 100%。

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。