vuevuetouch_0">vue+vue-touch及常见问题解决
vuetouch_1">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() {
//向右滑动 操作
}
}
ios_35">描述:使用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"//解决无法上下滑动
};