vue自定义底部导航栏标签栏的实现代码

如图所示，要完成类似的一个底部导航切换。

首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。

我将5个主要的某视频剪辑软件文件放在了5个不同的文件夹

然后，在成分文件夹里新建Tabbar.vue/以及Item.vue文件

Item.vue文件如下

模板div class=' ItemWarp flex _ mid ' @ click=' ChangePage ' span v-show='！BOL '插槽名称=' normalizg '/插槽/span span v-show=' BOL '插槽名称=' active img '/插槽/span span v-text=' txt '/span/div/模板脚本类型=' text/JavaScript '导出默认{ name : ' Item }，prop 3360 { txt : { type : string }，page: { type:String }，sel 33: { type 3: string }返回false} }，方法： { ChangePage : FuncTion(){//点击跳转对应的页面这个$路由器。推('/'这个。页面)；这个$emit('change '，这个。page)} } }/脚本样式类型=' text/CSS ' .项目扭曲{ flex-grow : 1；display : flex align-items :居中；正义-内容：中心；弯曲方向：柱；} .itemWarp span { font-size : 12px；}/styleTabbar.vue文件如下

模板div class=' tabberWarp ' div class=' warp ' Item : XT=' Item。txt ' :第='项。page ' @ change=' GetVal ' v-for=' tabbardes '中的项目' :已选择='已选择' img : src=' http :项目。normalizeg ' slot=' normalizeg ' img 3: src=' http 33: Item。活动img ' slot='活动img '/Item/div/Item。vue ' export default { components 3360 { Item }，data : function(){ return { selected : ' skin '，tab bards :[{ txt 3360 '表情，第：页"皮肤",标准：要求("./assets/images/zz_07.jpg ')，activeImg:require('./assets/images/22_03.jpg') }，{ txt: '皮肤，第：页' phiz '，normalImg:require('./资产/图片/下载_皮肤_ IC。png ')，activeImg:require('./assets/images/112_26.jpg') }，{ txt: '词库，第：页"同义词库",规格化：require("./assets/images/zz_09.jpg ')，activeImg:require('./assets/images/icon2_03.jpg') }，{ txt: '账号，第：页"帐户",规格化：require("./assets/images/zz_11.jpg ')，activeImg:require('./assets/images/cion_03.jpg') }，{ txt: '设置，第：页"设置",规格化：require("./assets/images/zz_13.jpg ')，activeImg:require('./assets/images/22_03.jpg') } ] })，方法： { getval : function(RES){ this。选中=RES} } }/scriptstyle type='text/css ' .翘曲{宽度： 100%;边框-top: 1px实心# eee背景# fffdisplay : flexalign-items :居中；证明内容：空间环绕；font-size : 0；} .翘曲img { width : 20px thright : 20px }。tabberWarp img { margin-top : 10px；边距-底部： 5px} .tabberWarp { position:已固定；底部： 0；左： 0；宽度： 100%;衬垫-底部： 5px背景# fff}/styleTabbar.vue文件和Item.vue的关系为父子关系。

Tabbar.vue组件通过迭代循环tabbarDes里面的数据。再通过小道具向下传递数据给子组件Item.vue能接受到父组件传递的数据。

Item.vue组件绑定点击事件。

这个$路由器。推('/'这个。页面)；为跳转到对应的页

这个$emit('change '，this.page)为使用$emit触发父组件的自定义事件改变，将本页作为参数传递到父组件中。父组件点击获取到传递过来的参数。再通过小道具传递给item.vue .在计算计算属性中。返回不同的布尔值。来做底部图片的显示隐藏。

最后仅需要在App.vue中引入标签栏组件即可。

模板div id='app '路由器-视图/路由器-视图Tabbar/Tabbar div class=' empty '/div/div/templatescript import Tabbar from '。/components/Tabbar ' export default { name : ' app '，created: function () {this。$ router.push ('/')}，components 3360 { tab bar } }/脚本摘要

以上是边肖介绍的vue定制的底部导航栏Tabbar的实现代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！