vue中如何使用vue-touch插件
作者：前端小凯
这篇文章主要介绍了vue中使用vue-touch插件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue中使用vue-touch
如果想让vue能够监听移动端的上滑、下滑、左滑、点击等等动作，可以使用vue-touch插件。vue-touch的使用十分简单。
首先在vue项目中安装vue-touch
npm install vue-touch@next --save
然后在main.js或mian.ts上导入并使用：
import VueTouch from "vue-touch";
Vue.use(VueTouch, {name: "v-touch"});使用<v-touch></v-touch>来包裹要使用vue-touch的元素
<v-touch @swipeleft="nowLeft()" @swiperight="nowRight()">
<ul class="list">
<li v-for="(item, index) in move_nowData" :key="item.id">
<div>
<img :src="item.cover" />
</div>
<h3>{{ item.title }}</h3>
<p>{{ item.rate }}</p>
</li>
</ul>
</v-touch>使用@touch.js的事件名="函数名( )"来使用vue-touch
methods: {
nowLeft() {
// 获取list
let now = document.getElementsByClassName("list")[0];
now.style.transform += "translateX(-30rem)";
now.style.transition = "all ease 0.5s";
},
nowRight() {
// 获取list
let now = document.getElementsByClassName("list")[0];
now.style.transform += "translateX(30rem)";
now.style.transition = "all ease 0.5s";
},
},touch.js常用事件
使用vue-touch实现移动端左右滑动屏幕切换页面（左右滑动切换路由）
1.安装vue-touch
npm install vue-touch@next --save
2.在main.js中引入
import VueTouch from 'vue-touch'
Vue.use(VueTouch,{name:'v-touch'})
VueTouch.config.swipe = {
threshold:50 //设置左右滑动的距离
}import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import GoodsList from '@/view/GoodList'
import GoodDetail from '@/view/GoodDetail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path:'/goods',
name:'GoodsList',
component:GoodsList
},{
path:'/detail',
name:'GoodDetail',
component:GoodDetail
}
]
})4.在某页面中
<template>
<div class="hello">
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</v-touch>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods:{
swiperleft: function () { //左划切换到goods页
this.$router.push({'path':'/goods'});
},
swiperright: function () { //右滑切换到detail页
this.$router.push({'path':'/detail'});
}
}
}
</script>到此这篇关于vue中使用vue-touch的文章就介绍到这了,更多相关vue使用vue-touch内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！