微信小程序swiper，scroll-view和touch混用

html

   视频
   推荐
   直播


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

　JS

// pages/swiper/index.js
import tool from '../../utils/tool.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,
    animation:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.animation = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
  },
 
  bindchange(e){
    const {current, source}=e.detail;
    this.setData({
      page2current:current
    })
  },
  bindanimationfinish(e){
    if(this.data.page2current==2){
      if(this.data.isTotouch==4){
        var animation=this.animation;
        this.animation.left('-'+2*100+'vw').step()
        this.setData({
          currentView:2,
          animation: animation.export()
        })
      
      }else{
        this.setData({
          isTotouch:4
        })
      }
    }else if(this.data.page2current==0){
        if(this.data.isTotouch==-1){
          var animation=this.animation;
          this.animation.left(0).step()
          this.setData({
            currentView:0,
            animation: animation.export()
          })
         
        }else{
          this.setData({
            isTotouch:-1
          })
        }
    }
  },
  touchStart(event) {
    this.startPageX = event.changedTouches[0].pageX;
    this.startPageY = event.changedTouches[0].pageY;
  },
  touchEnd(event) {
    let currentX = event.changedTouches[0].pageX;
    let currentY = event.changedTouches[0].pageY;
    let tx = currentX - this.startPageX;
    let ty = currentY - this.startPageY;
    const maxPage = 2;
    let currentView=this.data.currentView;
    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {//向左滑动
        currentView = currentView !== maxPage ? currentView+ 1 : maxPage;
      }else if (tx > 0) { //向右滑动
        currentView = currentView !== 0 ? currentView - 1 : 0;
      }
      var animation=this.animation;
      this.animation.left('-'+currentView*100+'vw').step()
      this.setData({
        currentView:currentView,
        animation: animation.export()
      });
    }else {
      if (ty < 0){ //向上滑动"
      } else if (ty > 0) { //向下滑动
      }
    }
    //将当前坐标进行保存以进行下一次计算
    this.startPageX = currentX;
    this.startPageY = currentY;
  },
  bindtap(event){
    const type=Number(event.currentTarget.dataset.typecurrent);
    var animation=this.animation;
    this.animation.left('-'+type*100+'vw').step()
    this.setData({
      currentView:type,
      animation:animation.export()
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  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;
}