Shulou(Shulou.com)05/31 Report--

This article mainly explains how to solve the dynamic tabBar problem at the bottom of uniapp WeChat Mini Programs. The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to solve the dynamic tabBar problem at the bottom of uniapp WeChat Mini Programs.

Demand

If there are six pages of A B C D E F in the subpackage, these six pages can be displayed as tabbar pages. The specific configuration is returned through the backend API (the number of pages is still limited to 2-5). For example, if the backend configures A B C D E, the five pages are tabbar pages, then A B C D E will be displayed as a tab page. The jump method is also tab, and the jump to F page is a normal navigate jump.

This will solve the problem of multi-merchant bottom tab configuration, allowing merchants to configure the display mode of Mini Program tab page.

Realization principle

1. Customize the bottom navigation, and obtain the data through the API.

two。 The page content that needs to be configured as tab is extracted into components, the corresponding page refers to the components directly, and the tab page refers to all the components, and is displayed according to the corresponding component page path of the current tab page.

3. Solve the life cycle problem of the component.

Realize

Overall structure of the page

Pages.json page is configured with 5 tabbar template pages, and easycom mode is used to load components automatically.

"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"}]}

Customize the uview components used by tabbar

/ / sww-tab-bar 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')}:: v-deep .u-fixed-placeholder {opacity: 0 }

Tabbar data format saved in vuex

Vuex_tab_bar: {list: [], activeColor:', inactiveColor:', current: 0}, vuex_tab_bar_default: {/ / the default tabbar list used when the API does not get data: [{iconPath:'/ static/tab/home.png' SelectedIconPath:'/ static/tab/home_fill.png', text: 'home', url:'/ package/index/index'}, {iconPath:'/ static/tab/cat.png' SelectedIconPath:'/ static/tab/cat_fill.png', text: 'classification', url:'/ package/product/category/index'}, {iconPath:'/ static/tab/community.png' SelectedIconPath:'/ static/tab/community_fill.png', text: 'chain ring', url:'/ package/index/circle/index'}, {iconPath:'/ static/tab/cart.png' SelectedIconPath:'/ static/tab/cart_fill.png', text: 'shopping cart', / / url:'/ package/user/order/index' url:'/ package/user/cart/index'} {iconPath:'/ static/tab/user.png', selectedIconPath:'/ static/tab/user_fill.png', text:'my', url:'/ package/user/index'}], activeColor:'# e93324' InactiveColor:'# 666666, current: 0}

The above steps have completed the customization of the bottom tabbar, followed by the use of components in the tab page and the acquisition of tabbar data

/ / the code here is the content of five template tab pages, which introduces all the components that can be configured as tab. The js part is extracted into mixins for code reuse import {tabPage} from ".. /. / mixins/tabPage" Export default {mixins: [tabPage], data () {return {tabIndex: 4}} page {width: 100%; height: 100%;} .index-box {width: 100%; height: 100% } / / tabPagemixinsimport {mapState} from 'vuex'const App = getApp () export const tabPage = {computed: {... mapState ([' vuex_tab_bar', 'vuex_module_page']) / / get the page component pageModuleName (name) {return (name) = > {if (this.vuex_tab_bar.list.length > 0) {/ / where the url is the page path configured by the background user This path is the page path that actually exists in the subcontract. For example, if page An is to be configured as tab, then the content of page An is extracted into components, and the page is configured as tab at the backend. Simply configure the actual path of page A to 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 resets sharing onShow when 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) {}, / / WeChat Mini Programs share (friend) onShareAppMessage: function () {return this.$refs.modulePageRef.getShareAppMessage ()} / / WeChat Mini Programs shares (moments) onShareTimeline: function () {return this.$refs.modulePageRef.getShareTimeline ()}} Thank you for your reading The above is the content of "how to solve the dynamic tabBar problem at the bottom of uniapp WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how to solve the dynamic tabBar problem at the bottom of uniapp WeChat Mini Programs, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.