uniapp/微信小程序底部动态tabBar解决方案 (自定义tabBar底部导航)

最新推荐文章于 2024-07-25 10:09:53 发布

Terminal丶句点

最新推荐文章于 2024-07-25 10:09:53 发布

阅读量9.1k

点赞数 2

分类专栏：小程序 VUE 文章标签：小程序 uni-app

本文链接：https://blog.csdn.net/qq_40026668/article/details/108666918

版权

本文介绍了如何在uni-app和微信小程序中实现动态底部tabBar，通过后台接口获取配置，动态显示2-5个页面作为tabbar选项。通过组件化和Vuex管理，解决了页面跳转和组件生命周期的问题，实现多商家自定义tab配置的需求。

摘要由CSDN通过智能技术生成

需求

分包中如果有6个页面A B C D E F，这6个页面可以作为tabbar页面进行展示，具体配置通过后台接口返回（页面数量限制依然存在 2 - 5），比如后台配置A B C D E这个5个页面为tabbar页面，那么A B C D E将作为tab页展示，跳转方式也是tab方式跳转，跳转到F页面为普通navigate跳转。
这将解决多商家底部tab配置问题，可以让商家自己配置小程序tab页的展示模式。

实现原理

1.自定义底部导航，数据通过接口获取
2.将需要配置成tab的页面内容抽离成为组件，对应页面直接引用组件，tab页面引用全部组件，并根据当前tab页对应的组件页面路径分别展示。
3.解决组件的生命周期问题。

实现

页面整体结构
在这里插入图片描述
pages.json页面配置好5个tabbar模板页面，并且使用了easycom模式，自动加载组件

 "easycom": {
   
    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
    "^sww-(.*)": "@/components/sww-$1/sww-$1.vue"
  },
"tabBar": {
   
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
   
        "pagePath": "pages/index/index"
      },
      {
   
        "pagePath": "pages/module-page-one/index"
      },
      {
   
        "pagePath": "pages/module-page-two/index"
      },
      {
   
        "pagePath": "pages/module-page-three/index"
      },
      {
   
        "pagePath": "pages/module-page-four/index"
      }
    ]
  }

自定义tabbar使用的uview组件

//sww-tab-bar
<template>
  <u-tabbar v-model="current" :list="vuex_tab_bar.list" :active-color="vuex_tab_bar.activeColor"
            :inactive-color="vuex_tab_bar.inactiveColor"
            @change="onChange"></u-tabbar>
</template>
<script>
import {
   mapState} from 'vuex'
import {
   uniLinkTo} from "../../utils/uniPromise";

export default {
   
  data() {
   
    return {
   }
  },
  computed: {
   
    ...mapState(['vuex_tab_bar', 'vuex_tab_page']),
    current: {
   
      get(){
   
        return this.$store.state.vuex_tab_bar.current