swiper
滑块视图容器。其中只可放置< swiper-item >组件,否则会导致未定义的行为。
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | boolean | false | 是否显示面板指示点 |
autoplay | boolean | false | 是否自动切换 |
indicator-dots | boolean | false | 是否显示面板指示点 |
interval | number | 5000 | 自动切换时间间隔 |
duration | number | 500 | 滑动动画时长 |
swiper.wxml文件
<view class="container">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="{{slide-image}}"/>
</swiper-item>
</block>
</swiper>
<view>
<button type="primary" bindtap="changeIndicatorDots">indicator-dots</button>
<button type="primary" bindtap="changeAutoplay">autoplay</button>
</view>
<view>
<slider bindchange="intervalChange" show-value min="500" max="2000"/>interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/>duration
</view>
</view>
swiper.js文件
Page({
/**
* 页面的初始数据
*/
data: {
imgurls:[
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
indicatorDots:false,
autoplay:false,
interval:5000,
duration:1000
},
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
})
}
})
效果图