微信小程序 swiper 組件的點擊切換和滑動切換
滑動切換及點擊切換代碼塊
//滑動切換
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
},
//點擊切換
swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
swiper 的 swiper-item 下 scroll-view 無法滾動
swiper-item 和 scroll-view 及其中間的所有 view 都需要設(shè)置 height: 100%;
設(shè)置具體初始高度: style="height:{{winHeight}}px"
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">{{receipt}}</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">{{print}}</view>
</view>
- 無法滾動
<swiper current="{{currentTab}}" class="swiper-box" style="height:{{winHeight - 31}}px" duration="300" >
<swiper-item class="swiper-items">
<scroll-view scroll-x="false" scroll-y="true" class='scroll-views'>
</swiper-item>
</swiper>
wxss
.swiper-box{
display: block;
width: 100%;
height: 100%;
margin-top: 92rpx;
overflow: hidden;
margin-bottom:10px;
}
.swiper-items{
height: 100%;
}
.scroll-views{
height: 100%;
}
