版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
介绍
使用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