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>