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常用事件
更多推荐
所有评论(0)