Vue移动端右滑屏幕返回上一页

有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验。本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页。
安装依赖
使用npm安装vue-directive-touch组件。

npm install vue-directive-touch --save

引入组件
在main.js中引入vue-directive-touch。

import touch from 'vue-directive-touch';
Vue.use(touch);

使用
在App.vue的模板中加上滑动事件。

<template>
  <div id="app" v-touch:right="onSwipeRight">
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

vue-directive-touch提供了以下事件类型:

单击: v-touch:tap
长按: v-touch:long
左滑: v-touch:left
右滑: v-touch:right
上滑: v-touch:up
下滑: v-touch:down
然后在script部分加上滑动事件方法。

methods: {
      onSwipeRight () {
        this.$router.go(-1)
      }
    }

接着我们在具体的页面写上逻辑跳转路由,注意具体页面设置好页面触控范围,让整个屏幕都可以touch。

.cont{
  width: 100%;
  height: 500px;
}

参照今日头条app的图片栏目,我们还可以设置点击打开新页面,上滑打开评论窗口,下滑关闭图片等操作。

Vue touch directive项目地址:https://github.com/BensonDu/vue-directive-touch

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值