ホームページ >ウェブフロントエンド >jsチュートリアル >Vue ホームページにボトム ナビゲーション TabBar を作成する方法
今回は、vue ホームページのボトム ナビゲーション TabBar について説明します。vue ホームページのボトム ナビゲーション TabBar を作成する際の 注意事項 は何ですか?実際のケースを見てみましょう。
<template> <div class="index"> <div class="mainContent"> <router-view></router-view> </div> <div class="bottomBar"> <ul> <li @click="toColor" > <router-link :to="{name:'MapPlat'}"> ![](../assets/images/ic_map_nor@2x.png)![](../assets/images/ic_map@2x.png) <p :class="{bottomBarColorActive:isColor}">展图</p></router-link></li> <li @click="toColor2"> <router-link :to="{name:'Agenda'}"> ![](../assets/images/ic_yicheng_nor@2x.png)![](../assets/images/ic_yicheng@2x.png) <p :class="{bottomBarColorActive:isColor2}">议程</p></router-link></li> <li @click="toColor3"> <router-link :to="{name:'Recommend'}"> ![](../assets/images/ic_tuijian_nor@2x.png)![](../assets/images/ic_tuijian@2x.png) <p :class="{bottomBarColorActive:isColor3}">推荐</p></router-link></li> <li @click="toColor4"> <router-link :to="{name:'Attention'}"> ![](../assets/images/ic_guanzhu_nor@2x.png) ![](../assets/images/ic_guanzhu@2x.png) <p :class="{bottomBarColorActive:isColor4}">关注</p></router-link></li> <li @click="toColor5"> <router-link :to="{name:'Intro'}"> ![](../assets/images/ic_jianjie_nor@2x.png) ![](../assets/images/ic_jianjie@2x.png) <p :class="{bottomBarColorActive:isColor5}">简介</p></router-link></li> </ul> </div> </div></template><script>export default { name: 'index', data () { return { isColor:true, isColor2:false, isColor3:false, isColor4:false, isColor5:false } }, methods:{ toColor:function(){ this.isColor=true; this.isColor2=false; this.isColor3=false; this.isColor4=false; this.isColor5=false; }, toColor2:function(){ this.isColor=false; this.isColor2=true; this.isColor3=false; this.isColor4=false; this.isColor5=false; }, toColor3:function(){ this.isColor=false; this.isColor2=false; this.isColor3=true; this.isColor4=false; this.isColor5=false; }, toColor4:function(){ this.isColor=false; this.isColor2=false; this.isColor3=false; this.isColor4=true; this.isColor5=false; }, toColor5:function(){ this.isColor=false; this.isColor2=false; this.isColor3=false; this.isColor4=false; this.isColor5=true; }, } }</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.index { height: 100%; }.bottomBar { height: 100px; width: 100%; border: 1px solid #ccc; bottom: 0; background: rgba(255,255,255,0.90); position: fixed; bottom: 0; }.bottomBar ul { display: flex; width: 100%; justify-content:space-around; }.bottomBar ul li { /*width: 20%;*/}.bottomBar ul li img { margin: 8px 0; }.bottomBar ul li p { font-family: "PingFangSC-Regular"; font-size: 20px; color: #D2D7E8; letter-spacing: 0; line-height: 20px; }.mainContent { height:-webkit-calc(100% - 100px); height:-moz-calc(100% - 100px); height:calc(100% - 100px); }.bottomBarColorActive { color: #4D81EE !important; }</style>これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 関連記事:
Video.js を使用して H5 ライブ ブロードキャスト インターフェイスを実装する
以上がVue ホームページにボトム ナビゲーション TabBar を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。