1 <view class="container">
 2   <view class="page-body">
 3     <view class="page-section page-section-spacing swiper">
 4       <swiper
 5         indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
 6         interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
 7         <block wx:for="{{background}}" wx:key="*this">
 8           <swiper-item>
 9             <view class="swiper-item {{item}}"></view>
10           </swiper-item>
11         </block>
12       </swiper>
13     </view>
14     <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
15       <view class="weui-cells weui-cells_after-title">
16         <view class="weui-cell weui-cell_switch">
17           <view class="weui-cell__bd">指示点</view>
18           <view class="weui-cell__ft">
19             <switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" />
20           </view>
21         </view>
22         <view class="weui-cell weui-cell_switch">
23           <view class="weui-cell__bd">自动播放</view>
24           <view class="weui-cell__ft">
25             <switch checked="{{autoplay}}" bindchange="changeProperty" data-property-name="autoplay" />
26           </view>
27         </view>
28         <view class="weui-cell weui-cell_switch">
29           <view class="weui-cell__bd">衔接滑动</view>
30           <view class="weui-cell__ft">
31             <switch checked="{{circular}}" bindchange="changeProperty" data-property-name="circular" />
32           </view>
33         </view>
34         <view class="weui-cell weui-cell_switch">
35           <view class="weui-cell__bd">竖向</view>
36           <view class="weui-cell__ft">
37             <switch checked="{{vertical}}" bindchange="changeProperty" data-property-name="vertical" />
38           </view>
39         </view>
40       </view>
41     </view>
42
43     <view class="page-section page-section-spacing">
44       <view class="page-section-title">
45         <text>幻灯片切换时长(ms)</text>
46         <text class="info">{{duration}}</text>
47       </view>
48       <slider value="{{duration}}" min="500" max="2000" bindchange="changeProperty" data-property-name="duration" />
49       <view class="page-section-title">
50         <text>自动播放间隔时长(ms)</text>
51         <text class="info">{{interval}}</text>
52       </view>
53       <slider value="{{interval}}" min="2000" max="10000" bindchange="changeProperty" data-property-name="interval" />
54       <view class="page-section-title">
55         <text>前边距(px)</text>
56         <text class="info">{{previousMargin}}</text>
57       </view>
58       <slider value="{{previousMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="previousMargin" />
59       <view class="page-section-title">
60         <text>后边距(px)</text>
61         <text class="info">{{nextMargin}}</text>
62       </view>
63       <slider value="{{nextMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="nextMargin" />
64     </view>
65   </view>
66 </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     circular: false,
 8     interval: 2000,
 9     duration: 500,
10     previousMargin: 0,
11     nextMargin: 0
12   },
13   changeProperty: function (e) {
14     var propertyName = e.currentTarget.dataset.propertyName
15     var newData = {}
16     newData[propertyName] = e.detail.value
17     this.setData(newData)
18   },
19   changeIndicatorDots: function (e) {
20     this.setData({
21       indicatorDots: !this.data.indicatorDots
22     })
23   },
24   changeAutoplay: function (e) {
25     this.setData({
26       autoplay: !this.data.autoplay
27     })
28   },
29   intervalChange: function (e) {
30     this.setData({
31       interval: e.detail.value
32     })
33   },
34   durationChange: function (e) {
35     this.setData({
36       duration: e.detail.value
37     })
38   }
39 })