<view class="head-wrap" style="height:300rpx;background:#999;"></view>
<view class="card-wrap" style="transform:{{translateValue}};transition:{{transitionVal}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" ></view>
.card-wrap{
background: pink;
height: 600rpx;
width:100%;
}
let moveY=0 ,startY=0;
data: {
translateValue:"translateY(0rpx)",
transitionVal:"transform 1s linear"
},
touchstart(e){
console.log(e);
startY = e.touches[0].clientY;
this.setData({
transitionVal:''
})
},
touchmove(e){
moveY = e.touches[0].clientY;
let moveDistance =moveY - startY;
if(moveDistance < 0){
return;
}
if(moveDistance > 200){
moveDistance = 200;
}
this.setData({
translateValue:`translateY(${moveDistance}rpx)`
})
},
touchend(e){
this.setData({
translateValue:"translate(0rpx)",
transitionVal:"transform 1s linear"
})
}