swiper 套swiper 父横向，子横向或者竖向

html

   视频
   推荐
   直播



  
    
      
        
          {{item}}
        
      
    
  
  
    
      
        
          {{item}}
        
      
    
  
  
    
      2
      3
      4
    
  

　　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;
}