微信小程序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;
  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;
}

  

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章