swiper 套swiper 父橫向，子橫向或者豎向

html

<view class="nav-top">
   <view  class="nav-top-div1 {{currentView==0?'active':''}}" data-typeCurrent='0' bindtap="bindtap">視頻</view>
   <view  class="nav-top-div2 {{currentView==1?'active':''}}" data-typeCurrent='1' bindtap="bindtap">推薦</view>
   <view  class="nav-top-div3 {{currentView==2?'active':''}}" data-typeCurrent='2' bindtap="bindtap">直播</view>
</view>
<swiper class="swipercont" bindchange='bindchange2' current="{{currentView}}">
<block>
  <swiper-item>
    <swiper class="swiper2" vertical="true" >
      <block wx:for="{{background1}}" wx:key="*this">
        <swiper-item>
          <view class="swiper-item {{item}}">{{item}}</view>
        </swiper-item>
      </block>
    </swiper>
  </swiper-item>
  <swiper-item>
    <swiper class="swiper2" bindchange='bindchange' bindtransition='bindtransition' bindanimationfinish='bindanimationfinish' current="{{page2current}}">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
          <view class="swiper-item {{item}}">{{item}}</view>
        </swiper-item>
      </block>
    </swiper>
  </swiper-item>
  <swiper-item>
    <scroll-view  scroll-y="true" style="height:100%" >
      <view id="demo1" class="scroll-view-item demo-text-1">2</view>
      <view id="demo2"  class="scroll-view-item demo-text-2">3</view>
      <view id="demo3" class="scroll-view-item demo-text-3">4</view>
    </scroll-view>
  </swiper-item>
</block>
</swiper>

　　JS 

Page({
 
  /**
   * 頁面的初始數據
   */
  data: {
    currentView:0,//默認顯示第一個第div
    background1: ['視頻模塊div1', '視頻模塊div2', '視頻模塊div3'],
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    page2current:0,//默認swiperitem
    isTotouch:0,
  },
 
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
  },
  bindchange2(e){
    console.log('父親swiper')
    const {current, source}=e.detail;
    this.setData({
      currentView:current
    })
  },
  bindchange(e){
    console.log('子swiper')
    const {current, source}=e.detail;
    this.setData({
      page2current:current
    });

  },
  bindanimationfinish(e){
    console.log('子swiperfinish')
    if(this.data.page2current==2){
      if(this.data.isTotouch==4){
        this.setData({
          currentView:2,
        })
      }else{
        this.setData({
          isTotouch:4
        })
      }
    }else if(this.data.page2current==0){
        if(this.data.isTotouch==-1){
          this.setData({
            currentView:0,
          })
        }else{
          this.setData({
            isTotouch:-1
          })
        }
    }
  },
  bindtap(event){
    console.log(event);
    const type=Number(event.currentTarget.dataset.typecurrent);
    let page2current=0;
    if(type==2){
      page2current=2
    }else if(type==0){
      page2current=0
    }
    this.setData({
      currentView:type,
      page2current:page2current
    })
  },
 
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
 
  },
 
  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

　　CSS

.mian{
  position: absolute;
  height: 100%;
  left:0;
  top:0;
  width: 2260rpx;
}
.mian-div1{
  width: 100vw;
  height: 100vh;
  background-color: #00ff00;
  float: left;
}
.mian-div2{
  width: 100vw;
  height: 100vh;
  background-color: #00ff00;
  float: left;
}
.mian-div3{
  width: 100vw;
  height: 100vh;
  background-color: #00ff00;
  float: left;
}
.swiper2{
  width: 100%;
  height: 100%;
}
.nav-top{
  position: absolute;
  top:20px;
  display: flex;
  width: 500rpx;
  left:0;
  z-index: 1;
}
.nav-top-div1,.nav-top-div2,.nav-top-div3{
  flex:1;
  font-size: 30rpx;
  text-align: center;
  color:#000;
}
.nav-top-div1.active{
  color:#ff0000;
}
.nav-top-div2.active{
  color:#ff0000;
}
.nav-top-div3.active{
  color:#ff0000;
}
.swiper-item{
  text-align: center;
  width: 100%;
  padding-top:300rpx;
  font-size: 40rpx;
}
.scroll-view-item{
  height: 600rpx;
}
.cont{
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.swipercont{
  width: 100vw;
  height: 100vh;
  background-color: #f0f;
}