专栏首页前端开发随笔VantUI封装自定义Tabbar路由跳转

VantUI封装自定义Tabbar路由跳转

在src目录下新建个components文件夹来放自己定义的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: "首页",
          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: "学习",
          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",
        },
      ],
    };
  },

  //监听路由变化
  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组件的页面到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完整项目

https://github.com/skywalk94/vueWechatH5

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Nuxt使用vant导航栏组件tabbar

    按照我之前在vue/cli配置方法 发现watch事件刷新页面没有执行,而在vue/cli却执行 我也不想nuxt是什么原因、机制导致的 直接换种思路

    wePanda
  • vant使用IndexBar索引栏

    wePanda
  • 微信小程序使用Painter组件生成海报

    wePanda
  • 四翼无人机哪家强?盘点年度最受关注七款无人机

    中国的DJI Phantom 2 Vision+无人机以25分钟的飞行时间成为目前飞行时间最长的四轴飞行器。该机增加Wi-Fi覆盖范围至700米,能够自行飞行最...

    机器人网
  • 程序员面试金典 - 面试题 16.17. 连续数列(DP/分治)

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/contiguous-sequence-lcci 著...

    Michael阿明
  • Leetcode 162 Find Peak Element

    A peak element is an element that is greater than its neighbors. Given an inpu...

    triplebee
  • 初级算法-动态规划

    动态规划主要是解一些递归问题,也就是将递归写成非递归方式,因为编辑器无法正确对待递归,递归方法会导致很多计算结果被重复计算,比如菲波那切数列。

    方丈的寺院
  • 【leetcode刷题】T165-最长上升子序列

    https://leetcode-cn.com/problems/longest-increasing-subsequence/

    木又AI帮
  • 漫画:动态规划系列 第二讲

    在上一篇文章中,我们讲解了DP的概念并且通过示例了解了什么是动态规划。本篇中,我们将继续通过1道简单题型,进一步学习动态规划的思想。

    程序员小浩
  • 每日算法系列【LeetCode 312】戳气球

    有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中。

    godweiyang

扫码关注云+社区

领取腾讯云代金券