我想实现一个列表的下拉刷新,但是scroll-view没法做过渡动画,因此使用监听touch事件的方式手动实现。但是每次touchstart后的第一次监听到touchmove事件时,都是移动了至少30个坐标,请问是我使用有问题还是本来微信的设计就是如此?
// wxml
<scroll-view scroll-y="true" scroll-top="{{scrollTop}}"
bindtouchstart="touchstart"
bindtouchend="touchend"
catchtouchmove="touchmove"
bindscroll="scroll"
bindscrolltoupper="refresh"
bindscrolltolower="getmore"
>
<view class="loading" style="height:{{refreshHeight}}px;transition-duration:{{loadingTime}}s">
load
</view>
<view style="height:100%">
<view class="item" wx:for="{{list}}" wx:key="text">
<text class="description">{{item.text}}</text>
</view>
</view>
</scroll-view>
// js
touchstart:function(event){
console.log("touch-start");
console.log(event.touches[0].pageY);
if(this.data.scrollTop==0){
this.setData({startY:event.touches[0].pageY,touchNum:this.data.touchNum+1})
}
},
touchend:function(event){
console.log("touch-end");
if(event.touches.length==0)
this.setData({refreshHeight:20,loadingTime:0.2})
},
touchmove:function(event){
if(this.data.scrollTop==0){
var changeY=(event.touches[0].pageY-this.data.startY)*1.5;
console.log("changeY-before",changeY);
var newH=this.data.refreshHeight+changeY;
newH=(newH>=20?newH:20);
newH=(newH<=150?newH:150);
changeY=changeY>0?changeY:-changeY;
this.setData({loadingTime:changeY*0.01});
this.setData({refreshHeight:newH,startY:event.touches[0].pageY});
}
}
同问这个,急切的希望能得到解答
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。