欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)

 更新時(shí)間:2022年05月18日 15:57:32   作者:明知山_  
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn),分享給大家,具體如下:

在這里插入圖片描述

在src目錄下新建個(gè)components文件夾來(lái)放自己定義的tabbar組件

<template>
  <div
    v-if="
      $route.name == 'index' ||
        $route.name == 'learn' ||
        $route.name == 'person'
        "
  >
    <van-tabbar v-model="active" inactive-color="#666666" active-color="#000000" fixed placeholder>
      <van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index" :to="item.path">
        <span>{{ item.title }}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbarList: [
        {
          path: "/",
          title: "首頁(yè)",
          normal:
            "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-fx2.png",
          active:
            "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-fx.png",
        },
        {
          path: "/learn",
          title: "學(xué)習(xí)",
          normal:
            "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-xx.png",
          active:
            "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-xx2.png",
        },
        {
          path: "/person",
          title: "我的",
          normal:
            "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-wd.png",
          active:
            "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-wd2.png",
        },
      ],
    };
  },

  //監(jiān)聽路由變化
  watch: {
    $route(to) {
      this.activeTab(to.path);
    },
  },

  methods: {
    activeTab(path) {
      var index = this.tabbarList.map((item) => item.path).indexOf(path);
      if (index != -1) {
        this.active = index;
      }
    },
  },
};
</script>

引入tabbar組件的頁(yè)面到app.vue

<template>
  <div id="app">
  <router-view />
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "./components/tabbar.vue";  //引用組件的地址
export default {
  components: {
    tabbar
  },
  name: "App",
  data() {
    return {};
  },
  methods: {},

};
</script>

github完整項(xiàng)目

https://github.com/skywalk94/vueWechatH5

到此這篇關(guān)于VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vant封裝Tabbar路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue不能下載xls以及文件亂碼問(wèn)題解決

    Vue不能下載xls以及文件亂碼問(wèn)題解決

    最近工作中遇到了一些問(wèn)題,通過(guò)查找相關(guān)資料終于找到了相關(guān)的解決方法,這篇文章主要給大家介紹了關(guān)于Vue不能下載xls以及文件亂碼問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離

    Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離

    這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • 分享Vue組件傳值的幾種常用方式(一)

    分享Vue組件傳值的幾種常用方式(一)

    這篇文章主要給大家分享的是Vue組件傳值的幾種常用方式,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下
    2022-09-09
  • Vue數(shù)組中出現(xiàn)__ob__:Observer無(wú)法取值問(wèn)題的解決方法

    Vue數(shù)組中出現(xiàn)__ob__:Observer無(wú)法取值問(wèn)題的解決方法

    __ob__: Observer這個(gè)屬性其實(shí)是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無(wú)法取值問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-03-03
  • vue中render函數(shù)的使用詳解

    vue中render函數(shù)的使用詳解

    這篇文章主要介紹了vue中render函數(shù)的使用詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • 解決$store.getters調(diào)用不執(zhí)行的問(wèn)題

    解決$store.getters調(diào)用不執(zhí)行的問(wèn)題

    今天小編就為大家分享一篇解決$store.getters調(diào)用不執(zhí)行的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • vue2過(guò)濾器模糊查詢方法

    vue2過(guò)濾器模糊查詢方法

    今天小編就為大家分享一篇vue2過(guò)濾器模糊查詢方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)

    Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)

    這篇文章主要為大家介紹了Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vuex頁(yè)面刷新數(shù)據(jù)丟失解決方法詳解

    vuex頁(yè)面刷新數(shù)據(jù)丟失解決方法詳解

    這篇文章主要為大家介紹了vuex頁(yè)面刷新數(shù)據(jù)丟失解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解

    Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解

    在實(shí)際業(yè)務(wù)中,我們常用圖表來(lái)做數(shù)據(jù)統(tǒng)計(jì),數(shù)據(jù)展示,數(shù)據(jù)可視化等比較直觀的方式來(lái)達(dá)到一目了然的數(shù)據(jù)查看,但在大屏開發(fā)過(guò)程中,常會(huì)因?yàn)檫m配不同屏幕而感到困擾,下面我們來(lái)解決一下這個(gè)不算難題的難題
    2022-11-11

最新評(píng)論