uniapp 底部菜单_利用uni-app怎么对底部导航栏进行自定义

利用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怎么对底部导航栏进行自定义的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！