uniapp实现上下左右滑动

uniapp实现上下左右滑动

参考链接：blog.csdn.net/qq_35713752…

<view class="touch" @touchstart="touchstart" @touchend="touchend">
			
</view>

<script>
export default {
  data() {
    return {
      touchData: {}, //滑动事件数据
    }
  }
  methods: {
    touchstart(e) {
      this.touchData.clientX = e.changedTouches[0].clientX;
      this.touchData.clientY = e.changedTouches[0].clientY;
    },
    touchend(e) {
      const subX = e.changedTouches[0].clientX - this.touchData.clientX;
      const subY = e.changedTouches[0].clientY - this.touchData.clientY;
      if(subY > 50){
	console.log('下滑')
      }
      if(subY < -50){
        console.log('上滑')
      }
      if(subX > 50) {
        console.log('右滑')
      }
      if(subX < -50) {
        console.log('左滑')
      }
    }
  }
}
</script>        

需求是上下左右滑动进入不同的页面，结合uni.navigateTo的animationType属性实现

uni.navigateTo({
  url: "",
  animationType: 'slide-in-bottom'
})

具体的动画效果参考uniapp.dcloud.io/api/router?…