头闻号

吴江市德隆精细化工有限公司

溶剂染料|磷酸盐|通用有机试剂

首页 > 新闻中心 > 科技常识:vue cli使用vue
科技常识:vue cli使用vue
发布时间:2023-02-01 10:36:59        浏览次数:2        返回列表

今天小编跟大家讲解下有关vue cli使用vue-touch滑动(实现左右滑动切换页面) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关vue cli使用vue-touch滑动(实现左右滑动切换页面) 的相关资料,希望小伙伴们看了有所帮助。

原理:

其实是将百度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>

来源:爱蒂网