Shulou(Shulou.com)06/01 Report--

This article mainly explains "WeChat Mini Programs how to achieve the tabBar template", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "WeChat Mini Programs how to achieve the tabBar template" bar!

As we all know, WeChat Mini Programs's tabBar is new, and Wechat documents show that you can only open up to five layers of pages. This can easily lead to problems. What if I have five tabBar? The following are the exact words of Wechat:

An application can only open five pages at a time, and wx.navigateTo cannot open a new page normally after it has already opened five pages. Avoid multiple levels of interaction, or use wx.redirectTo

So these days I want to customize the template for the page to call according to the Wechat tabBar array. However, I have added a selectedColor and active attribute to each object in list to make it easier to style the current page of each tabBar. If you don't pass it, you can directly use the set selectedColor. Therefore, this string of data can only be set under each page, not under the common app.js configuration file, and there is a little code redundancy. Next time, we will study how to configure it directly to app.js perfection.

Just create a new tarBar.wxml template page, and then pass in data by referencing the page of the template. The code is as follows:

{{item.text}}

Next, we will test the configuration object of index.js:

/ / configure tabBar tabBar: {"color": "# 9E9E9E", "selectedColor": "# f00", "backgroundColor": "# fff", "borderStyle": "# ccc", "list": [{"pagePath": "/ pages/index/index", "text": "Home", "iconPath": ".. /.. / img/tabBar_home.png" "selectedIconPath": ".. / img/tabBar_home_cur.png", / / "selectedColor": "# 4EDF80", active: true}, {"pagePath": "/ pages/village/city/city", "text": "destination", "iconPath": ".. / img/tabBar_village.png" "selectedIconPath": ".. / img/tabBar_village_cur.png", "selectedColor": "# 4EDF80", active: false}, {"pagePath": "/ pages/mine/mine", "text": "my", "iconPath": ".. / img/tabBar_mine.png", "selectedIconPath": ".. /.. / img/tabBar_mine_cur.png" "selectedColor": "# 4EDF80", active: false}], "position": "bottom"}

Index.wxml introduction template:

Next, the mine.js file introduces the configuration object:

/ / configure tabBar tabBar: {"color": "# 9E9E9E", "selectedColor": "# f00", "backgroundColor": "# fff", "borderStyle": "# ccc", "list": [{"pagePath": "/ pages/index/index", "text": "Home", "iconPath": ".. /.. / img/tabBar_home.png" "selectedIconPath": ".. / img/tabBar_home_cur.png", / / "selectedColor": "# 4EDF80", active: false}, {"pagePath": "/ pages/village/city/city", "text": "destination", "iconPath": ".. / img/tabBar_village.png" "selectedIconPath": ".. / img/tabBar_village_cur.png", "selectedColor": "# 4EDF80", active: false}, {"pagePath": "/ pages/mine/mine", "text": "my", "iconPath": ".. / img/tabBar_mine.png" "selectedIconPath": ".. /.. / img/tabBar_mine_cur.png", "selectedColor": "# 4EDF80", active: true}], "position": "bottom"}

Mine.wxml introduction template:

The final demonstration is as follows:

In solution 2, I uniformly put the configuration data in the app.js file, and then add the data to the current page instance by clicking the jump page, as follows:

1. App.js file configuration:

/ / app.jsvar net = require ('common/net'); var astatl, astatd = {}, a_cbSucc, a_cbSuccFail, a_cbFail, a_cbCom, asanch, asancmscape App ({onLaunch: function () {var that = this;}, / / modify the tabBar activity value editTabBar: function () {var _ curPageArr = getCurrentPages (); var _ curPage = _ curPageArr [_ curPageArr.length-1] / / equivalent to the this object var _ pagePath=_curPage.__route__; if (_ pagePath.indexOf ('/')! = 0) in Page ({}) {_ pagePath='/'+_pagePath;} var tabBar=this.globalData.tabBar; for (var iTuno; I)

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.