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

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>
<view class="cont">
  <view class='mian'  animation="{{animation}}">
  <view class="mian-div1"  bindtouchstart="touchStart"  bindtouchend="touchEnd">
    <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>
  </view>
  <view class="mian-div2">
    <swiper class="swiper2" bindchange='bindchange' bindanimationfinish='bindanimationfinish' current="{{page2current}}">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
          <view class="swiper-item {{item}}">{{item}}</view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="mian-div3" bindtouchstart="touchStart"  bindtouchend="touchEnd">
    <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>
  </view>
</view>
</view>

　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;
   2260rpx;
}
.mian-div1{
   100vw;
  height: 100vh;
  background-color: #00ff00;
  float: left;
}
.mian-div2{
   100vw;
  height: 100vh;
  background-color: #00ff00;
  float: left;
}
.mian-div3{
   100vw;
  height: 100vh;
  background-color: #00ff00;
  float: left;
}
.swiper2{
   100%;
  height: 100%;
}
.nav-top{
  position: absolute;
  top:20px;
  display: flex;
   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;
   100%;
  padding-top:300rpx;
  font-size: 40rpx;
}
.scroll-view-item{
  height: 600rpx;
}
.cont{
   100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}