利用uni-app怎么对底部导航栏进行自定义
发布时间：2020-12-14 15:15:03
来源：亿速云
阅读：78
利用uni-app怎么对底部导航栏进行自定义？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
1. tabbar 组件
:
v-for="(item, index) in tabbarList"
:key="index"
@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;
justify-content: space-evenly;
text-align: center;
padding: 10px 0;
background-color: #fff;
box-shadow: 0 -1.5px 3px #eee;
z-index: 999;
.title {
font-size: 12px;
}
}
2. 引入
这里使用的是swiper，duration为0是为了关闭页面切换动画效果，
:currentIndex="currentIndex"
class="tabbar-container"
@getCurrentIndex="getCurrentIndex"
/>
mounted() {
this.tabbarHeight = getApp().globalData.tabbarHeight
},
getCurrentIndex(e) {
this.currentIndex = e;
}
看完上述内容，你们掌握利用uni-app怎么对底部导航栏进行自定义的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
| 
转播
