微信小程序滑動屏幕控制動畫隱藏和顯示

思路一,使用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)
},

注意,如果不給動畫加開始和結束的默認條件約束,動畫會顯示的很頻繁,不能靈活讀取

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章