首先给页面添加 touch 事件

<view class="text-area" @touchstart="start" @touchend="end">

</view>

  然后定义一个合理区间进行判断,用户当前是上下滑动看书还是左右滑动变换章节.

start(e){

    this.startData.clientX=e.changedTouches[].clientX;

    this.startData.clientY=e.changedTouches[].clientY;
},
end(e){
// console.log(e)
const subX=e.changedTouches[].clientX-this.startData.clientX;
const subY=e.changedTouches[].clientY - this.startData.clientY;
if(subY> || subY<-){
console.log('上下滑')
}else{
if(subX>){
console.log('右滑')
}else if(subX<-){
console.log('左滑')
}else{
console.log('无效')
}
}
}

  这里面根据用户如果上下滑动的幅度超过 50 即认定为用户当前行为是上下翻看内容,否则就根据用户左右滑动的幅度进行判断,取值左右 100 为有效区间,小于则认定为无效操作!

uni-app 手指左右滑动实现翻页效果的更多相关文章

  1. Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)

    这个数字时钟的源码可以在Qt Demo中找到,风格是仿Android的,不过该Demo中含有三种动画效果(鉴于本人未曾用过Android的系统,因此不知道Android的数字时钟是否也含有这三种效果) ...

  2. ViewPager实现滑动翻页效果

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...

  3. 微信里经常看到的滑动翻页效果,slide

    上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...

  4. Android 滑动效果高级篇(七)—— 华丽翻页效果

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader ...

  5. Android平台中的三种翻页效果机器实现原理

    本文给开发者集中展现了Android平台中的三种翻页效果机器实现原理,希望能够对开发者有实际的帮助价值! 第一种翻页效果如下:     实现原理: 当前手指触摸点为a,则 a点坐标为(ax,ay), ...

  6. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  7. Android 实现书籍翻页效果----完结篇

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...

  8. Android 实现书籍翻页效果----升级篇

    自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...

  9. transform3D实现翻页效果

    ---恢复内容开始--- 闲篇 最近升级了下百度音乐,唯一的感觉就是动画效果很炫丽.我不是个对产品很敏感的人,但是这段时间观察一些大厂的产品发现现在的APP越来越重视动画效果了.大家可能没有注意过,连 ...

随机推荐

  1. WebRTC基于GCC的拥塞控制算法[转载]

    实时流媒体应用的最大特点是实时性,而延迟是实时性的最大敌人.从媒体收发端来讲,媒体数据的处理速度是造成延迟的重要原因:而从传输角度来讲,网络拥塞则是造成延迟的最主要原因.网络拥塞可能造成数据包丢失,也 ...

  2. VMware ESXi 和 VMware Server 有区别

    VMware ESXi 和 VMware Server 有区别: VMware ESXi 是一个企业级虚拟机管理程序,提供接近本机性能的祼机体系结构.各种旨在提高整合率的功能(例如取消内存复制),以及 ...

  3. getSuperclass与getGenericSuperclass区别

    声明三个类class Person<T, V> {}class Teacher {}class Student extends Person<Student, Teacher> ...

  4. flutter 跳转至根路由

    上代码 //flutter 登录后跳转到根路由 Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (co ...

  5. 部分易错JS知识点整理(缓慢填坑)

    主要还是各地搜刮来的,本人对于这方面的总结还是8彳亍,给各位大佬磕头了砰砰砰 1. 2.JS闭包和匿名对象以及作用域 js在执行之前,会将所有带var和function的进行提前定义和声明.(带var ...

  6. 洛谷P4979 矿洞:坍塌

    洛谷题目链接 珂朵莉树吼啊!!! 又是一道水题,美滋滋~~~ $A$操作完全模板区间赋值 $B$操作也是一个模板查询,具体看代码 注意:读入不要用$cin$,会$T$,如果你是大佬,会玄学东西当我没说 ...

  7. 树莓派安装QT(全部库包括)

    在网上现有的资料中大部分只有前两个命令,少量有三个命令,因此写下该博客 在树莓派上安装QT5的全部库,包括QtQuick.QtMultimedia库. sudo apt-get install qt5 ...

  8. linux技巧----查找某个正在执行的脚本

    如果在机器上发现有执行的脚本,却不知道在哪,可以这样找 例如 # netstat -ltnp Active Internet connections (only servers) Proto Recv ...

  9. chrome获取xpath元素-f12工具

    Chrome浏览器获取XPATH的方法----通过开发者工具获取 引用源:https://blog.csdn.net/li6727975/article/details/46126079   版权声明 ...

  10. skbuff

    在2.6.24之后这个结构体有了较大的变化,此处先说一说2.6.16版本的sk_buff,以及解释一些问题. 一. 先直观的看一下这个结构体~~~~~~~~~~~~~~~~~~~~~~在下面解释每个字 ...