欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序滑动屏幕控制动画隐藏和显示

程序员文章站 2022-05-05 19:09:37
...

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

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