微信小程序实现水平+垂直滚动

要点swiper内部套scroll-view

注意：
1.scroll竖直滚动高度不能给百分比要给px/rpx
2.swiper内部item posiiton定位高度100%
3.swiper高度要给定值
4.如果横向滚动也要给水平的宽度

代码

xml

    <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
      <swiper-item class="tab-content">
        <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
          <view class="cont">
            <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
              <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
            </view>
          </view>
        </scroll-view>

      </swiper-item>
      <swiper-item class="tab-content">
        <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
          <view class="cont">
            <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
              <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

wxss

.tab-box{
  height: 1040rpx;
}
.scroll-height {
height: 1040rpx;
}

js

myAudit(){
  this.setData({
    currentTab:0,
  })
},
myInitiate(){
  this.setData({
    currentTab:1,
    // jiraArray:[]
  })
},
switchTab(event){
  var cur = event.detail.current;
  var singleNavWidth = this.data.windowWidth / 5;
  this.setData({
      currentTab: cur,
      navScrollLeft: (cur - 2) * singleNavWidth
  });
}