一.wxml
<view class="section">
<swiper indicator-dots="{{inditoeDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width='355' height="150"></image>
</swiper-item>
</block>
</swiper>
<button bindtap="changeinditoeDots">indicator-dots</button>
<button bindtap="changeAutoplay">autoplay</button>
<slider bindchange="intervalChange" show-value min="500" max="2000">interval</slider>
<slider bindchange="durationChange" show-value min="1000" max="10000">duration</slider>
</view>
二.js
// pages/demo1/index.js
var order=['red','yellow','blue','green','red']
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: ['../../image/1.jpg', '../../image/2.jpg','../../image/3.jpg'],
inditoeDots:false,
autoplay:false,
interval:5000,
duration:1000
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
changeinditoeDots:function(e){
this.setData({ inditoeDots: !this.data.inditoeDots})
},
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})
}
})