uniapp微信小程序底部動態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)

更新時間：2022年04月22日 09:09:25 作者：Terminal丶句點

tabBar如果應(yīng)用是一個多tab應(yīng)用,可以通過tabBar配置項指定tab欄的表現(xiàn),以及tab切換時顯示的對應(yīng)頁,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序底部動態(tài)tabBar的解決方案,需要的朋友可以參考下

需求

分包中如果有6個頁面A B C D E F，這6個頁面可以作為tabbar頁面進行展示，具體配置通過后臺接口返回（頁面數(shù)量限制依然存在 2 - 5），比如后臺配置A B C D E這個5個頁面為tabbar頁面，那么A B C D E將作為tab頁展示，跳轉(zhuǎn)方式也是tab方式跳轉(zhuǎn)，跳轉(zhuǎn)到F頁面為普通navigate跳轉(zhuǎn)。
這將解決多商家底部tab配置問題，可以讓商家自己配置小程序tab頁的展示模式。

實現(xiàn)原理

1.自定義底部導(dǎo)航，數(shù)據(jù)通過接口獲取

2.將需要配置成tab的頁面內(nèi)容抽離成為組件，對應(yīng)頁面直接引用組件，tab頁面引用全部組件，并根據(jù)當(dāng)前tab頁對應(yīng)的組件頁面路徑分別展示。

3.解決組件的生命周期問題。

實現(xiàn)

頁面整體結(jié)構(gòu)

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
      },
      set(value){
        this.$store.commit('$uStore',{name: 'vuex_tab_bar.current', value})
      }
    }
  },
  methods: {
    onChange(index) {
      uniLinkTo(this.vuex_tab_page[index], 'tab')
    }
  }
}
</script>
<style lang="scss" scoped>
	::v-deep .u-fixed-placeholder {
		opacity: 0;
	}
</style>

vuex中保存的tabbar數(shù)據(jù)格式

 vuex_tab_bar: {
            list: [],
            activeColor: '',
            inactiveColor: '',
            current: 0
        },
vuex_tab_bar_default: { //接口未獲取到數(shù)據(jù)時使用的默認tabbar
            list: [
                {
                    iconPath: '/static/tab/home.png',
                    selectedIconPath: '/static/tab/home_fill.png',
                    text: '首頁',
                    url: '/package/index/index'
                },
                {
                    iconPath: '/static/tab/cat.png',
                    selectedIconPath: '/static/tab/cat_fill.png',
                    text: '分類',
                    url: '/package/product/category/index'
                },
                {
                    iconPath: '/static/tab/community.png',
                    selectedIconPath: '/static/tab/community_fill.png',
                    text: '鏈圈',
                    url: '/package/index/circle/index'
                },
                {
                    iconPath: '/static/tab/cart.png',
                    selectedIconPath: '/static/tab/cart_fill.png',
                    text: '購物車',
                    // url: '/package/user/order/index'
                    url: '/package/user/cart/index'
                },
                {
                    iconPath: '/static/tab/user.png',
                    selectedIconPath: '/static/tab/user_fill.png',
                    text: '我的',
                    url: '/package/user/index'
                }
            ],
            activeColor: '#e93324',
            inactiveColor: '#666666',
            current: 0
        },

上面的步驟已經(jīng)完成了自定義底部tabbar，接下來是tab頁面中使用組件的方式和tabbar數(shù)據(jù)的獲取

//這里的代碼是5個模板tab頁面的內(nèi)容，頁面引入了所有可配置成為tab的組件，js部分抽離到mixins中進行代碼復(fù)用
<template>
  <view class="index-box">
    <block v-if="pageModuleName('/package/index/index')">
      <sww-page-home ref="modulePageRef"></sww-page-home>
    </block>
    <block v-if="pageModuleName('/package/product/category/index')">
      <sww-page-category ref="modulePageRef"></sww-page-category>
    </block>
    <block v-if="pageModuleName('/package/index/circle/index')">
      <sww-page-circle ref="modulePageRef"></sww-page-circle>
    </block>
    <block v-if="pageModuleName('/package/user/cart/index')">
      <sww-page-cart ref="modulePageRef"></sww-page-cart>
    </block>
    <block v-if="pageModuleName('/package/user/index')">
      <sww-page-user ref="modulePageRef"></sww-page-user>
    </block>
    <block v-if="pageModuleName('/package/user/order/index')">
      <sww-page-order ref="modulePageRef"></sww-page-order>
    </block>
    <sww-tab-bar ref="tabBarRef"></sww-tab-bar>
    <sww-login></sww-login>
  </view>
</template>
<script>
import {tabPage} from "../../mixins/tabPage";

export default {
  mixins: [tabPage],
  data() {
    return {
      tabIndex: 4
    }
  }
}
</script>
<style>
page {
  width: 100%;
  height: 100%;
}
.index-box {
  width: 100%;
  height: 100%;
}
</style>

// tabPagemixins
import {mapState} from 'vuex'
const App = getApp()

export const tabPage = {
    computed: {
        ...mapState(['vuex_tab_bar', 'vuex_module_page']),
        //獲取當(dāng)前tab頁要顯示的頁面組件
        pageModuleName(name) {
            return (name) => {
                if (this.vuex_tab_bar.list.length > 0) {
                	//這里的url是后臺用戶配置的頁面路徑，此路徑是分包中實際存在的頁面路徑，比如A頁面要配置成為tab，那么就將A頁面內(nèi)容抽離成組件，后臺配置此頁面為tab，只需將A頁面的實際路徑進行配置即可
                    return this.vuex_tab_bar.list[this.tabIndex].url === name
                } else {
                    return false
                }
            }
        }
    },
    onLoad: function () {
        this.$nextTick(() => {
            try {
                if (this.vuex_tab_bar.list.length === 0) {
                   App.loadTabBarList().then(() => {
                       this.$refs.modulePageRef.$onLoad()
                   })
                } else {
                    this.$refs.modulePageRef.$onLoad()
                }
            } catch (e) {

            }
        })
    },
    // isoH5在onshow時要重置分享
    onShow: function () {
        this.$nextTick(() => {
            try {
                this.$refs.modulePageRef.$onShow()
            } catch (e) {

            }
        })
    },
    onHide: function () {
        this.$nextTick(() => {
            try {
                this.$refs.modulePageRef.$onHide()
            } catch (e) {

            }
        })
    },
    onPullDownRefresh: function () {
        try {
            this.$refs.modulePageRef.$onPullDownRefresh()
        } catch (e) {

        }
    },
    onReachBottom: function () {
        try {
            this.$refs.modulePageRef.$onReachBottom()
        } catch (e) {

        }
    },
    // 微信小程序分享(好友)
    onShareAppMessage: function () {
        return this.$refs.modulePageRef.getShareAppMessage()
    },
    // 微信小程序分享(朋友圈)
    onShareTimeline: function () {
        return this.$refs.modulePageRef.getShareTimeline()
    }
}