uni-app-x
一次开发,多端覆盖
1. 当前示例监听了整个页面的touchstart、touchmove、touchend事件 ,实现监听拖动事件。
2. 在拖动事件,使用 ref 直接获取 ref="body" 元素的节点,通过节点的 setProperty 方法来修改 transform的translateY 的值(根据在Y轴方向拖动的距离),从而达到页面跟随手指上下拖动的效果。
3. 在拖动事件,使用 ref 直接获取 ref="head-img" 元素的节点,通过节点的 setProperty 方法来修改 transform的scale 的值(根据在Y轴方向拖动的距离),从而达到手指上下拖动时图片缩放的效果。
4. 在拖动完成事件,通过帧动画,设置上述两个元素回到原来的位置。
5. 请向上\向下拖动页面观察效果。