swiper用于滑动效果的组件
<swiper>
<swiper-item wx:for='{{imgs}}'>
<image src='{{item}}'/>
</swiper-item>
</swiper>
swiper组件中的swiper-item为单个滑动项
swiper-item中加入这里加入一个for循环, 当然也可以不加入多个<swiper-item>标签
<view>
<swiper indicator-dots='true' autoplay='true' interval='2000' current='4' bindchange='imgchang'>
<swiper-item>
<image src='/img/icon/home.png'/>
</swiper-item>
<swiper-item>
<image src='/img/icon/phone.png'/>
</swiper-item>
<swiper-item>
<image src='/img/icon/home.png'/>
</swiper-item>
<swiper-item>
<image src='/img/icon/location.png'/>
</swiper-item>
<swiper-item>
<image src='../img/icon/weichat.png'/>
</swiper-item>
</swiper>
</view>
swiper中只可放置<swiper-item/>
组件,否则会导致未定义的行为。
swiper-item 也只能放置在<swiper/>
组件中,宽高自动设置为100%, 如上这样使用
swiper其它的属性:
indicator-dots 是还显示带圆点来标识
autoplay是否自动滑动(播放)
interval设置自动播放的时间间隔
current页面显示时, 第一次显示在当前位置上的是哪一个swiper-item组件
bindchang在swiper-item组件转换(播放)时触发事件
<view>
<swiper indicator-dots='true' autoplay='true' interval='2000' current='4'
bindchange='imgchang'>
<swiper-item>
<image src='/img/icon/home.png'/>
</swiper-item>
<swiper-item>
<image src='/img/icon/phone.png'/>
</swiper-item>
<swiper-item>
<image src='/img/icon/home.png'/>
</swiper-item>
<swiper-item>
<image src='/img/icon/location.png'/>
</swiper-item>
<swiper-item>
<image src='../img/icon/weichat.png'/>
</swiper-item>
</swiper>
</view>
slider组件:
<slider show-value='true' min='0' max='5000' bindchange='sliderBindChange'/>
show-value显示当前值
min最小值
max最大值
bindchange改变值后触发的事件
如下可通过其事件改变swiper的效果(也适用于其它的)
<slider show-value='true' min='0' max='5000' bindchange='sliderBindChange'/>
<button bindtap='autoplayChange'>自动播放切换</button>
如下改是否自动播放和播放快慢
sliderBindChange : function(e) {
this.setData({
interval: e.detail.value
});
},
// 给自动播放autoplay取反
autoplayChange : function(e) {
this.setData({
autoplay: !this.data.autoplay
});
},