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

介绍

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

源码工程地址：VueTouch

效果图

安装

npm install vue-touch@next
1

使用方式

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

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

1
2
3
4

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

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
          }
        })
      ])
    ])
  }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

事件列表

插件地址：vue-touch