用於做底部懸浮定位,懸浮在tabbar上
在設置tabbar的組件中獲取,利用組件生命週期,獲取tabbar高度,將高度存到本地,用於全局獲取
attached() {
let query = wx.createSelectorQuery().in(this);
query.select('.custom-tab-bar').boundingClientRect(rect => {
console.log('獲取tabBar元素的高度', rect);
wx.setStorageSync('tabBarHeight', rect.height) // 將獲取到的高度設置緩存,以便之後使用
}).exec();
},
頁面中使用,將元素固定到tabbar上方
<view :style="{
width: '100%',
position: 'fixed',
bottom: tabbarHeight + 'px',
}"></view>
export default {
data() {
return {
tabbarHeight: 0,
}
},
onLoad() {
this.tabbarHeight = uni.getStorageSync('tabBarHeight') || 0;
}
}
這樣頁面就可以動態獲取tabbar的高度