撇捺人生
撇捺人生
  • 发布:2020-04-14 11:33
  • 更新:2022-02-17 10:14
  • 阅读:7534

uni app 两种方式实现屏幕下拉,手指下滑屏幕的时候背景图片放大,缩放的效果

分类:uni-app

uni app 两种方式实现屏幕下拉,手指下滑屏幕的时候背景图片放大,缩放的效果
其实核心原理都是一样,就是通过获取手指在屏幕上移动的距离来是图片放大或者缩小

1.方式一:
使用onPageScroll()来监听页面的滚动(废话少说直接上代码)


that.scroll < e.scrollTop 代表手指向上滑动 ,让this.changeBig=false(不让图片缩放)
that.scroll < e.scrollTop 表示手指向下滑动,让图片缩放

缩放class类的使用和缩放动画
缩放class类:


缩放动画:

然后手指下滑,图片放大,手指上滑还原(动画效果流畅)

2.方式二:
通过触摸屏的触发事件


触发函数:

startWhere()获取到手指开始触摸手机屏幕的位置pageY
endWhere()获取到手指在手机屏幕上移动的的位置,触发的速度很快,所以我们要获取到最后手指停住的时候的pageY
然后计算出两者直接的距离差distance,再去判断distance是否大于res.screenHeight 0.01(屏幕的高度0.01),大于这个值就会this.changeBig=true,去执行缩放动画
returnSize()手指松开后,将缩放效果结束
代码:

3.结语:
思想就是那么个思想,获取手指移动的距离,然后达到自己的要求后,让图片缩放,最后离开的试试记得还原

3 关注 分享
4***@qq.com d***@yunfanda.com 7***@qq.com

要回复文章请先登录注册

1***@qq.com

1***@qq.com

感谢大佬提供的方法
2022-02-17 10:14
李致荣

李致荣

好歹贴个完整代码啊,哥,新手完全不知道怎么用呀
2021-08-26 22:00
5***@qq.com

5***@qq.com

这个scroll是什么的值
2020-07-10 14:21
撇捺人生

撇捺人生 (作者)

回复 1***@qq.com :
嘿嘿
2020-04-14 13:39
1***@qq.com

1***@qq.com

点赞
2020-04-14 13:02
撇捺人生

撇捺人生 (作者)

嘿嘿,就是这样!
2020-04-14 11:58