这两天UI提了一种交互效果,希望页面滚动到某个位置的时候让一个按钮fix住,而这个位置时不定高度的,这个位置会根据当前页面的内容多少而动态改变(简而言之就是 height:auto)
废话不多说,直接撸代码
- 在Page的onReady回调里获取特定元素的高度
这里用到了小程序api-wx.createSelectorQuery(),指定ID元素的详细属性会在rect的回调里返回
onReady () {
setTimeout(() => {
const _this = this
wx.createSelectorQuery().select('#YOUR_ELEMEMT_ID')
.boundingClientRect(function (rect) {
console.log(rect)
_this.setData({
top: rect.top
})
}).exec()
}, 300)
}
- 有人可能会问上面代码的定时器是干嘛的,不是已经在页面渲染完成OnReady回调里了吗?
- 事实上,这里可能是小程序的bug,如果不加定时器,获取的元素高度还是没渲染完异步数据前的高度
- 当获取到高度后就可以实现滚动到某个位置进行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;
}
- 写在最后的话:
- 如果有更好的解决方案请在下方留言
- 转载请注明出处
