ibeautiful
2019-03-07 14:15:58
我就是想要做一個(gè)搜索欄隨著下滑漸隱,隨著上滑漸出的動(dòng)畫,但是找不到流暢的解決方案一開(kāi)始嘗試用transition屬性,判斷下滑方向和搜索欄顯示狀態(tài),當(dāng)兩者不一致時(shí)更新搜索欄height值。在電腦上看著效果很好,但是用安卓測(cè)試的時(shí)候卡頓嚴(yán)重:var now = e.detail.scrollTopvar last = this.data.scrollTopvar scrollDown = this.data.scrollDownvar sHeight = this.data.sHeightif ((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,然而卡頓依然嚴(yán)重:var animation = wx.createAnimation({ duration: 500, timingFunction: "ease"})this.animation = animationif ((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查了一下感覺(jué)transform和animation的運(yùn)行效率也差不多,畢竟也是要走transition所以有沒(méi)有大佬可以提供一個(gè)較好的解決方案orz跪謝
1 回答

元芳怎么了
TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊
好吧,解決了!!確實(shí)是用transform.....
handleScroll: function(e){
var now = e.detail.scrollTop
var last = this.data.scrollTop
var scrollDown = this.data.scrollDown
if ((now > last && !scrollDown) || (now < last && scrollDown))
{
scrollDown = this.data.scrollDown = 1 - scrollDown
this.setData({
hidden: scrollDown ? 'transform: translateY(-60px);':'',
})
}
this.data.scrollTop = now
console.log(now)
},
添加回答
舉報(bào)
0/150
提交
取消