Vue监听手机滑动事件vue-touch

介绍

使用vue-touch插件手机滑动事件的监听，及后续操作的执行。

源码工程地址：VueTouch

效果图

安装

npm install vue-touch@next

使用方式

步骤一：main.js中引入vue-touch

//main.js中引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

步骤二：实现滑动监听代码

export default {
  name: 'vue_touch_index',
  data: () => ({
    img_list: [
      {
        src: '../../static/img/vue_touch_img_1.png'
      },
      {
        src: '../../static/img/vue_touch_img_2.png'
      },
      {
        src: '../../static/img/vue_touch_img_3.png'
      },
      {
        src: '../../static/img/vue_touch_img_4.png'
      },
    ],
    selected: 0
  }),
  methods: {},
  render(h) {
    return h('div', {
      staticClass: 'col-grow items-center text-center q-pa-sm'
    }, [
      h('v-touch', {
        on: {
          swipedown: () => {
            this.selected = this.selected === 0 ? 0 : this.selected - 1
            if (this.selected === 0)
              this.$q.ok("已到顶！")
          },
          swipeup: () => {
            this.selected = this.selected === 3 ? 3 : this.selected + 1
            if (this.selected === 3)
              this.$q.ok("已到底！")

          }
        }

      }, [
        h('img', {
          style: {
            height: '100%',
            width: '400px'
          },
          attrs: {
            src: this.img_list[this.selected].src
          }
        })
      ])
    ])
  }
}

事件列表

事件名称	事件描述
pan	在指定的 DOM 区域内，一个手指放下并移动事件，即触屏中的拖动事件
panstart	拖动开始
panmove	拖动过程
panend	拖动结束
pancancel	拖动取消
panleft	向左拖动
panright	向右拖动
panup	向上拖动
pandown	向下搬动
swipe	在指定的 DOM 区域内，一个手指快速的在触屏上滑动，即平时用到最多的滑动事件
swipeleft	向左滑动
swiperight	向右滑动
swipeup	向上滑动
swipedown	向下滑动
pinch	在指定的 DOM 区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件
pinchstart	多点触控开始
pinchmove	多点触控过程
pinchend	多点触控结束
pinchcancel	多点触控取消
pinchin	多点触控时两手指越来越近
pinchout	多点触控时两手指越来越远
press	在指定的 DOM 区域内，这个事件相当于 PC 端的 Click 事件，不能包含任何的移动，最小按压时间为 500ms，常用于我们在手机上用的复制粘贴等功能
pressup	点击事件离开时触发
tap	在指定的 DOM 区域内，一个手指轻拍或点击时触发该事件（类似 PC 端的 click），该事件最大点击时间为 250ms，如果超过 250ms 则按 press 事件处理
rotate	在指定的 DOM 区域内，当两个手指或更多手指呈圆型旋转时触发
rotatestart	旋转开始
rotatemove	旋转过程
rotateend	旋转结束
rotatecancel	旋转取消

插件地址：vue-touch