实现微信小程序个人中心页面的某个区域的下拉回弹效果。例如以下代码代表需要下拉回弹的区域:
给这个区域加上事件:手指触发的时候事件、手指移动的事件、手指松开的事件。同时加上动画的样式。
<view class="cover-container"
bindtouchstart="handleTouchStart"
bindtouchmove="handleTouchMove"
bindtouchend="handleTouchEnd"
style="transform: {{coverTransform}}; transition: {{coverTranstion}};">
</view>
下面是js文件中的部分:首先声明三个变量,代表不同的坐标。之后通过动画实现下拉移动,动画实现回弹。
// pages/persion/persion.js
let startY=0;//手指起始的坐标
let moveY=0;//手指移动的坐标
let moveDistance=0;//手指移动的距离
Page({
/**
* 页面的初始数据
*/
data: {
coverTransform:'translateY(0)',
coverTranstion:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
handleTouchStart(e){
this.setData({
coverTranstion:''
})
//手指起始的坐标
startY=e.touches[0].clientY;
},
handleTouchMove(e){
moveY=e.touches[0].clientY;
moveDistance=moveY-startY;
// console.log(moveDistance);
if (moveDistance<0) {
return;
}
if (moveDistance>=80) {
moveDistance=80;
}
// 动态更新coverTransform的值
this.setData({
coverTransform:`translateY(${moveDistance}rpx)`
})
},
handleTouchEnd(){
// console.log("end");
this.setData({
coverTransform:`translateY(0rpx)`,
coverTranstion:'transform 1s linear'
})
},
})