我就是想要做一个搜索栏随着下滑渐隐,随着上滑渐出的动画,但是找不到流畅的解决方案
一开始尝试用transition属性,判断下滑方向和搜索栏显示状态,当两者不一致时更新搜索栏height值。
在电脑上看着效果很好,但是用安卓测试的时候卡顿严重:
var now = e.detail.scrollTop var last = this .data.scrollTop var scrollDown = this .data.scrollDown var sHeight = this .data.sHeight if ((now > last && !scrollDown) || (now < last && scrollDown)) { sHeight = 40-sHeight this .data.scrollDown = !scrollDown this .setData({ sHeight: sHeight }) } this .data.scrollTop = e.detail.scrollTop |
然后尝试使用微信的animation API,然而卡顿依然严重:
var animation = wx.createAnimation({ duration: 500, timingFunction: "ease" }) this .animation = animation if ((now > last && !scrollDown) || (now < last && scrollDown)) { this .data.scrollDown = 1 - scrollDown this .animation.scale(scrollDown).step() this .setData({ sHeightAnim: this .animation.export() }) } this .data.scrollTop = e.detail.scrollTop |
查了一下感觉transform和animation的运行效率也差不多,毕竟也是要走transition
所以有没有大佬可以提供一个较好的解决方案orz跪谢
如果你是要边滑边变淡,那小程序并不合适,
因为 setData 的沟通成本比操作 DOM 还高,连 setData 一个 loading 都会卡顿。
所以现在你的选择是正确的,很棒,
只需2个状态,其他就靠 webview 端的 transition 了。
好吧,解决了!!确实是用transform.....
handleScroll: function(e){var now = e.detail.scrollTopvar last = this.data.scrollTopvar scrollDown = this.data.scrollDownif ((now > last && !scrollDown) || (now < last && scrollDown)) { scrollDown = this.data.scrollDown = 1 - scrollDownthis.setData({ hidden: scrollDown ? 'transform: translateY(-60px);':'', }) }this.data.scrollTop = now console.log(now) },