Vue实现移动端左右滑动效果的方法
更新时间：2018年11月27日 09:01:06 作者：daozun
最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，经过一番折腾，最终决定四月vue-touch。下面小编把实现代码分享给大家，感兴趣的朋友一起看看吧
1. 最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，在网上查阅资料，最终锁定了vue-touch
2. 下载vue-touch （https://github.com/vuejs/vue-touch/tree/next） 注意：如果Vue是2.x 的版本的话，一定要下next分支上的。
3. 使用：
3.1 npm install vue-touch@next --save
3.2 在main.js 中 引入：
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
VueTouch.config.swipe = {
threshold: 100 //手指左右滑动距离
}
3.3 在左右滑动页面的父页面使用,如：
<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
<router-view></router-view>
</v-touch>
左滑事件：swipeleft， 右滑事件：swiperight， 更多事件请查阅api
4. 注意事项：
使用左右滑动之后，发现不能上下滑动了，这是因为vue-touch 默认禁止了用户的手势操作，注意组件上有个css属性：touch-action: none；
把这个属性覆盖一下就好了，如： touch-action: pan-y!important;
总结
以上所述是小编给大家介绍的Vue实现移动端左右滑动效果的方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要为大家介绍了vue3响应式实现readonly从零开始教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
vue中this.$refs.name.offsetHeight获取不到值问题
这篇文章主要介绍了vue中this.$refs.name.offsetHeight获取不到值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue头像处理方案，实现思路主要是通过获取后台返回头像url，判断图片宽度，高度。具体实例代码大家参考下本文2018-07-07
这篇文章主要为大家详细介绍了Vuex实现记事本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了vue实现局部刷新的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vue3动态路由(响应式带参数的路由)变更页面不刷新的问题解决办法
问题来源是因为我的开源项目Maple-Boot项目的网站前端,因为项目主打的内容发布展示,所以其中的内容列表页会根据不同的菜单进行渲染不同的路由,本文降介绍Vue3动态路由变更页面不刷新的问题解决办法,需要的朋友可以参考下2024-07-07
在Vue Element的table组件中插入超链接,可以使用<el-link>标签替代传统的<a>标签,实现更加整洁的UI设计,具体操作是替换原有的<span>标签,直接使用<el-link>进行超链接的插入,使得链接样式与Element UI保持一致2024-09-09
这篇文章主要给大家介绍了关于vue3内嵌iframe的传参与接收参数的相关资料,Vue项目中使用iframe及传值功能相信有不少人都遇到过,需要的朋友可以参考下2023-07-07
本文主要介绍了Vue 中页面传值的多种方式小结,主要包括路由传参、Vuex 状态管理、Props 属性和事件传递数据这几种,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要为大家详细介绍了Vue实现简单图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
最新评论