uniapp 底部菜单_uni-app 自定义底部导航栏的实现

这是我目前发现较好的uni-app 自定义底部导航栏方法，其他方法的缺点主要是在切换时，要么会闪烁，要么会每点击一下，都会请求一次数据。如果有其他更好的方法，欢迎评论留言，最近才开始用uni-app写项目，之前只是看了下文档。

1. tabbar 组件

:style="{ color: currentIndex == index ? '#007EFF' : '#333333' }"

v-for="(item, index) in tabbarList"

:key="index"

style="flex: 1"

@click="switchTab(index)"

>

{ { item.title }}

mounted(){

let dom = uni.createSelectorQuery().select('.tabbar-container')

dom.boundingClientRect(e => {

// tabbarHeight使用频次较高，就设为全局变量了

getApp().globalData.tabbarHeight = e.height

}).exec()

}

.iconfont {

font-size: 18px;

}

.tabbar-container {

display: flex;