微信小程序swiper组件的点击切换及滑动切换及无法滚动的问题

微信小程序 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%;
}