Stories

Detail Return Return

動態tabbar後的tabbar高度獲取 - Stories Detail

用於做底部懸浮定位,懸浮在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的高度

user avatar chenxiaoxi_619df8932f34a Avatar pantao Avatar
Favorites 2 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.