微信小程序 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 都需要设置 height: 100%;
设置具体初始高度: 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%;
}
