vue cli使用vue-touch滑动(实现左右滑动切换页面)

前端  /  管理员 发布于 6年前   329

原理：

其实是将百度touch.js引入到项目中 然后有滑动等事件 在事件中调用方法，vue-touch 地址：https://github.com/vuejs/vue-touch/tree/next

安装：

npm install vue-touch @ next

引入man.js(我引入的报错，找不到路径 手动改掉)

import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})VueTouch.config.swipe = {threshold: 100 //手指左右滑动距离}

 下面是一个使用的例子 （使用提供的v-touch标签 就可以触动手势 根据不同的手势调用方法即可，swipeleft左滑事件）

<template>          <div>        <p>testRouter.vue</p>      <v-touch v-on:swipeleft="swiperleft"  class="wrapper">left</v-touch>      <v-touch  v-on:swiperight="swiperright" class="wrapper">right</v-touch>   <div class="menu-container" ref="menuContainer">    <!-- 这个是内容 -->    </div>        </div>   </template><script> export default {     data(){         return{                      }     },    methods: {    swiperleft: function () {        console.info(111);   this.$router.push({'path':'/b'});  },  swiperright: function () {   this.$router.push({'path':'/a'});   console.info(2222);  }    } }</script><style></style>