Vue移动端右滑屏幕返回上一页 | 您所在的位置:网站首页 › ipad2返回上一级手势 › Vue移动端右滑屏幕返回上一页 |
有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验。 安装依赖使用npm安装vue-directive-touch组件。 npm install vue-directive-touch --save 引入组件在main.js中引入vue-directive-touch。 import touch from 'vue-directive-touch'; Vue.use(touch);使用 在App.vue的模板中加上滑动事件。 vue-directive-touch提供了以下事件类型: 单击: v-touch:tap长按: v-touch:long左滑: v-touch:left右滑: v-touch:right上滑: v-touch:up下滑: v-touch:down然后在script部分加上滑动事件方法。 methods: { onSwipeRight () { this.$router.go(-1) } }接着我们在具体的页面写上逻辑跳转路由,注意具体页面设置好页面触控范围,让整个屏幕都可以touch。 .cont{ width: 100%; height: 500px; }在此我们还可以设置点击打开新页面,上滑打开评论窗口,下滑关闭图片等操作。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |