vue实现左右滑动tab（vue-touch）

原创

已于 2022-11-21 11:47:04 修改 · 6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2020-08-14 17:47:51 首次发布

下载（vue-touch）

npm install vue-touch@next --save

main.js中引入：

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {
   
   name: 'v-touch'})

开始使用 (用v-touch将要实现滑动的区域包住并绑定相应事件)

<v-touch @swipeleft='left' @swiperight='right'>
			<div class="tablBox" v-if="index == 0">
				1巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
			</div>
			<div class="tablBox" v-if="index == 1">
				2巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
			</div>
			<div class="tablBox" v-if="index == 2">
				3巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉
			</div>
			<div class="tablBox" v-if="index == 3