這兩天UI提了一種交互效果,希望頁面滾動到某個位置的時候讓一個按鈕fix住,而這個位置時不定高度的,這個位置會根據(jù)當(dāng)前頁面的內(nèi)容多少而動態(tài)改變(簡而言之就是 height:auto)
廢話不多說,直接擼代碼
- 在Page的onReady回調(diào)里獲取特定元素的高度
這里用到了小程序api-wx.createSelectorQuery(),指定ID元素的詳細屬性會在rect的回調(diào)里返回
onReady () {
setTimeout(() => {
const _this = this
wx.createSelectorQuery().select('#YOUR_ELEMEMT_ID')
.boundingClientRect(function (rect) {
console.log(rect)
_this.setData({
top: rect.top
})
}).exec()
}, 300)
}
- 有人可能會問上面代碼的定時器是干嘛的,不是已經(jīng)在頁面渲染完成OnReady回調(diào)里了嗎?
- 事實上,這里可能是小程序的bug,如果不加定時器,獲取的元素高度還是沒渲染完異步數(shù)據(jù)前的高度
- 當(dāng)獲取到高度后就可以實現(xiàn)滾動到某個位置進行fixed的操作了
onPageScroll (e) {
if (this.data.top <= e.scrollTop) {
this.setData({
fixed: true
})
} else {
this.setData({
fixed: false
})
}
}
<!-- 這里是粗略的頁面和樣式-->
<view class="{{fixed?'fixed':''}}" id="YOUR_ELEMENT_ID">
在這里固定住
</view>
.fixed{
position:fixed;
}
- 寫在最后的話:
- 如果有更好的解決方案請在下方留言
- 轉(zhuǎn)載請注明出處
