- 现在很多项目为了达到更好的用户体验，都想把功能都做的更好的展示效果。
- 那就来看看 vue-touch 吧 vue-touch github
PS:如果Vue是2.x 的版本的话，一定要下next分支上的。
- 安装 vue-touch
npm install vue-touch@next --save
yarn add vue-touch@next --save
cnpm install vue-touch@next --save dev
- 使用
在main.js 中 引入
// main.js
import VueTouch from 'vue-touch
Vue.use(VueTouch, {name: 'v-touch'})
VueTouch.config.swipe = {
threshold: 100 //手指左右滑动距离
}
- 在左右滑动页面的父组件使用
<v-touch v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight" tag="div">
<router-view></router-view>
</v-touch>
左滑事件：swipeleft， 右滑事件：swiperight，更多请看API
网友评论