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

注意,如果不给动画加开始和结束的默认条件约束,动画会显示的很频繁,不能灵活读取

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐