微信小程序滑动屏幕控制动画隐藏和显示
程序员文章站
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)
},
注意,如果不给动画加开始和结束的默认条件约束,动画会显示的很频繁,不能灵活读取
上一篇: 微信小程序--动画
下一篇: 微信小程序按钮隐藏显示view