Page({
data: {
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,
vertical: false,
autoplay: false,
circular: false,
interval: 2000,
duration: 500,
previousMargin: 0,
nextMargin: 0
},
/***********一个函数处理不同设置**************/
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
})
}
/***********不同函数处理不同设置**************/
<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}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{background}}" wx: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="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">指示点</view>
<view class="weui-cell__ft">
<switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">自动播放</view>
<view class="weui-cell__ft">
<switch checked="{{autoplay}}" bindchange="changeProperty" data-property-name="autoplay" />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">衔接滑动</view>
<view class="weui-cell__ft">
<switch checked="{{circular}}" bindchange="changeProperty" data-property-name="circular" />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">竖向</view>
<view class="weui-cell__ft">
<switch checked="{{vertical}}" bindchange="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" bindchange="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" bindchange="changeProperty" data-property-name="interval" />
<view class="page-section-title">
<text>前边距(px)</text>
<text class="info">{{previousMargin}}</text>
</view>
<slider value="{{previousMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="previousMargin" />
<view class="page-section-title">
<text>后边距(px)</text>
<text class="info">{{nextMargin}}</text>
</view>
<slider value="{{nextMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="nextMargin" />
</view>
</view>
</view>