微信小程序每个页面都要三个文件：js、wxml、wxss
swiper相当于循环滚动视图适合广告位等展示。
1.swiper.wxml
<view class="page">
<view class="page__hd">
<text class="page__title">swiper</text>
<text class="page__desc">swiper</text>
</view>
<view class="page__bd">
<view class="section section_gap swiper">
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{background}}">
<swiper-item>
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="btn-area">
<button type="default" bindtap="changeIndicatorDots">indicator-dots</button>
<button type="default" bindtap="changeVertical">{{vertical?'horizontal':'vertical'}}</button>
<button type="default" bindtap="changeAutoplay">autoplay</button>
</view>
<slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000"/>
<view class="section__title">duration</view>
<slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
<view class="section__title">interval</view>
</view>
</view>
#######changeIndicatorDots是点击事件是否展示dots
#######changeVertical 是点击事件是否竖向、横向
#######changeAutoplay 是时间是否自动滚动
#######durationChange 改变持续时间
#######intervalChange 改变间隔时间
#######点击事件具体实现在js中代码。
2.swiper.js
Page({
data: {
background: ['green', 'red', 'yellow'],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 3000,
duration: 1200
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeVertical: function (e) {
this.setData({
vertical: !this.data.vertical
})
},
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
})
}
})
#######在页面上绑定的事件变化具体时间在这个js实现。
3.swiper. wxss
.swiper-item{
display: block;
height: 150px;
}
.page {
background-color: #fbf9fe;
height: 100%;
}
.btn-area{
padding: 0 30px;
}
.section__title{
margin-bottom: 16rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.section_gap .section__title{
padding-left: 0;
padding-right: 0;
}
.section{
margin-bottom: 80rpx;
}
.section_gap{
padding: 0 30rpx;
}
#######页面所需要的css。
效果展示.png
