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