思路一,使用scroll-view組件的事件,缺點:動畫不夠流暢
思路二,微信小程序自帶的pagescroll事件,缺點:監聽不方便,層級較高
思路三,給頁面最外層添加觸摸事件
思路四,小程序自帶的觸摸事件的API
一個觸摸開始的監聽,一個觸摸結束的監聽。爲了實現動畫流暢,加上一定的延時延時,動畫速度均勻即可。
rowTouchMove:function(){
if(console.log("rowTouchMove--------------------111"),
this.data.plaTreesInfo.open&&this.props.TouchMoveFlag){ //設置兩個默認的動畫開關條件
var t=wx.createAnimation({
duration:this.data.duration,
timingFunction:"linear"
});
t.translate3d(90,0,0).step(),
this.setData({
animationData:t.export()
}),
this.props.TouchMoveFlag=!1} //改變動畫開關狀態
},
rowTouchEnd:function(){
var t=this;
console.log("rowTouchEnd--------------------222"),
this.data.plaTreesInfo.open&&setTimeout(function(){//讀取開關動畫條件
var e=wx.createAnimation({
duration:t.data.duration,
timingFunction:"linear"
});
e.translate3d(0,0,0).step(),
t.setData({
animationData:e.export()
}),
t.props.TouchMoveFlag=!0 //改變動畫開關狀態
},600)
},
注意,如果不給動畫加開始和結束的默認條件約束,動畫會顯示的很頻繁,不能靈活讀取