vue實(shí)現(xiàn)底部菜單功能
具體代碼如下所示:
<template> <div class="mui-row"> <div class="mui-col-xs-12 mui-row nav"> <div class="mui-col-xs-4" @tap="tab1=1;tab2=1;tab3=1"> <router-link to="/recommend" ><img :src="'img/tabIcon/tab1'+tab1+'.png'" @tap="tab1=1;tab2=1;tab3=1"/><span class="mui-tab-label" @tap="tab1=1;tab2=1;tab3=1">{{"推薦好課" | title}}</span></router-link> </div> <div class="mui-col-xs-4" @tap="tab2=2;tab1=2;tab3=1"> <router-link :to="{path: '/Broadcast/' +(tabNum=tabNum==undefined?0:tabNum)}"><img :src="'img/tabIcon/tab2'+tab2+'.png'" @tap="tab2=2;tab1=2;tab3=1"/><span class="mui-tab-label" @tap="tab2=2;tab1=2;tab3=1">{{"師道直播" | title}}</span></router-link> </div> <div class="mui-col-xs-4" @tap="tab3=2;tab1=2;tab2=1"> <router-link to="/my"><img :src="'img/tabIcon/tab3'+tab3+'.png'" @tap="tab3=2;tab1=2;tab2=1"/><span class="mui-tab-label" @tap="tab3=2;tab1=2;tab2=1">{{"我" | title}}</span></router-link> </div> </div> </div> </template> <style scoped> .mui-row { background: #FFF; border-top:1px solid #F5F5F5; } .mui-col-xs-12 .mui-col-xs-4 { text-align: center; height: 50px; } img{position:relative; top:0px; width: 30px; height: 30px; padding-top: 0; padding-bottom: 0; } .mui-tab-label{ font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; margin-top: -7px; } a{color:#b9b5b5;} .mui-bar{ -webkit-box-shadow: 0 0 1px rgba(222, 219, 219, 0.85); box-shadow: 0 0 1px rgba(222, 219, 219, 0.85); } .mui-row .router-link-exact-active.router-link-active{ color:#3FCDFF; } .mui-col-xs-12 .mui-col-xs-4 a{height: 50px; display: inline-block; width: 100%;} </style> <script> export default { created() { this.$route.params.tabNum=0; }, mounted() { if(this.$route.params.tabNum!='undefined'){ this.tabNum=this.$route.params.tabNum;//因?yàn)檫@個(gè)切換選項(xiàng)卡就path改變了 } else{ this.tabNum=0; } if(this.$route.path=='/my'){ this.tab3=2;this.tab1=2;this.tab2=1 } else if(this.$route.path=='/Broadcast/'+this.tabNum){//因?yàn)檫@里的path是隨著選項(xiàng)卡切換改變的。所以要寫成動(dòng)態(tài)的。 this.tab2=2;this.tab1=2;this.tab3=1 }else{ this.tab1=1;this.tab2=1;this.tab3=1 } }, beforeRouteEnter(to, from, next) { // console.log(to) // if (to.params.db == null) { // return next({ name: "", params: { id: to.params.id } }); // } // next(); }, components: {}, data() { return { tabNum:0, tab1:1, tab2:1, tab3:1, } }, methods: { }, watch:{ "$route.params"(tab){ // this.tabNum=this.$route.params.tabNum; }, } } </script>
我的幾個(gè)圖標(biāo)是這樣的。
最終的效果點(diǎn)擊那個(gè)那個(gè)就變成藍(lán)色的。并且進(jìn)入子頁(yè)面再切出來(lái)他還是藍(lán)色的。
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)底部菜單功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹形菜單(demo)
- 詳解Vue用自定義指令完成一個(gè)下拉菜單(select組件)
- vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼
- Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
- vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果
- Vue組件tree實(shí)現(xiàn)樹形菜單
- Vue2組件tree實(shí)現(xiàn)無(wú)限級(jí)樹形菜單
- Vue.js 遞歸組件實(shí)現(xiàn)樹形菜單(實(shí)例分享)
- Vue.js組件tree實(shí)現(xiàn)無(wú)限級(jí)樹形菜單
相關(guān)文章
Vue中對(duì)watch的理解(關(guān)鍵是immediate和deep屬性)
watch偵聽器,是Vue實(shí)例的一個(gè)屬性,是用來(lái)響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí),這個(gè)方式是最有用的,這篇文章主要介紹了Vue中對(duì)watch的理解,需要的朋友可以參考下2022-11-11Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法
這篇文章主要介紹了Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue實(shí)施重新發(fā)布和軟件熱更新的經(jīng)驗(yàn)分享
在Web應(yīng)用的開發(fā)周期中,版本管理和軟件熱更新是一個(gè)不可或缺的話題,隨著Vue.js框架的流行,越來(lái)越多的應(yīng)用程序選擇使用Vue來(lái)構(gòu)建前端,本文將探討在Vue應(yīng)用中實(shí)施重新發(fā)布和熱更新的最佳實(shí)踐,需要的朋友可以參考下2024-09-09解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory
這篇文章主要介紹了解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12