vue cli使用vue-touch滑动(实现左右滑动切换页面)

更新日期: 2019-04-15阅读: 3.8k标签: 滑动

原理:

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

链接: https://fly63.com/article/detial/2895

vue自定义移动端touch事件,点击、滑动、长按事件

vue自定义指令_监听移动端touch事件,包括:点击、滑动、长按等事件,加强对Touch的一些理解。Vue.directive指令封装的使用

vue移动端弹框出现,背景禁止滑动

由于弹框比较长,所以弹出的时候前面的弹框内容需要滑动,但是背景需要禁止滚动,所以使用watch 监听,弹窗出现禁止滚动,弹框消失可以滚动。

Pushbar.js带模糊效果的隐藏滑动侧边栏插件

Pushbar.js是一个小巧的Javascript插件,它可以用于在Web应用程序中创建滑动侧边栏效果,还提供模糊效果,就像开关抽屉的效果。你可以完全定制效果,它不依赖任何第三方库,你可以使用它作为侧栏菜单或者操作选项滑出效果。

原生js拖拽功能制作滑动条实例教程

拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素,先把html代码写出来,如下所示

vue实现左右滑动效果实例代码

vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

uni-app关闭系统侧边滑动返回的方法总汇

主要介绍 uniapp关闭左侧滑动返回功能,无论安卓还是IOS,系统都自带左侧滑动返回上一页的功能,在实际开发中,我们可能需要关闭系统侧边滑动返回的功能,在uni-app中如何实现呢?

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!