vue-touch实现上划翻页

最新推荐文章于 2024-08-25 22:41:00 发布

原创最新推荐文章于 2024-08-25 22:41:00 发布 · 684 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

前端专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍如何在Vue项目中引入并使用vue-touch组件库，实现触摸设备上的滑动事件监听，包括全局安装、main.js引入及具体组件内的事件绑定与处理逻辑。

1、全局引入：

npm insall vue-touch@next --save

2、main.js中引入：

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

3、代码中使用

<template>
    <div class="hello" id="start">
    </div>
</template>

<script>
export default {
  name: 'Start',
  data () {
    return {
      startX: 0, // 鼠标开始点击的x坐标
      startY: 0, // 鼠标开始点击的Y坐标
    }
  },
  mounted () {
    // 给被滑动对象添加事件
    let element = document.getElementById('start')
    this.addHandler(element, 'touchstart', this.handleTouchEvent)
    this.addHandler(element, 'touchend', this.handleTouchEvent)
    this.addHandler(element, 'touchmove', this.handleTouchEvent)
  },
  components: {
    Logo
  },
  methods: {
      // 给目标添加事件，处理兼容
    addHandler (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false)
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler)
        } else {
            element['on' + type] = handler
        }
    },
    // 具体的滑动处理
    handleTouchEvent (event) {
      switch (event.type) {
        case 'touchstart':
          this.startX = event.touches[0].pageX
          this.startY = event.touches[0].pageY
          break
        case 'touchend':
          var spanX = event.changedTouches[0].pageX - this.startX
          var spanY = event.changedTouches[0].pageY - this.startY
          if(spanY < -50){
              this.$router.push('/end')
          }
          break
        case 'touchmove':
          // 阻止默认行为
          event.preventDefault()
          break
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import './css/style.css';
</style>