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