混合开发笔记4——使用v-touch插件的h5页面无法在ios上下滑动

vue+vue-touch及常见问题解决

vue-touch使用

Vue项目的移动端页面上加上左右滑动效果，安装插件vue-touch
（1）安装

npm install vue-touch@next --save

（2）main.js引入

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

（3）组件中使用

<v-touch @swipeleft="swiperleft" @swiperight="swiperright" class="wrapper">
  <div class="menu-container" ref="menuContainer"></div>
</v-touch>

methods: {
    swiperLeft() {
      //向左滑动  操作
    },
    swiperRight() {
      //向右滑动  操作
    }
}

描述：使用v-touch插件的h5页面无法在ios上下滑动

原因：插件老版本可能会在ios系统浏览器中无法上下滑动屏幕，可在v-touch标签中设置如下属性。
解决：
（1）组件内使用

<v-touch :swipe-options="{ direction: 'horizontal'}">

（2）main.js引入时添加

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
VueTouch.config.swipe = {
  threshold: 100, //手指左右滑动距离
  direction: "horizontal"//解决无法上下滑动
};