[wechat applet development] custom tabbar case (custom message 99 + little hearts)

Welcome to
Magic house ！！

The article contains columns
2022 Wechat applet Jingdong Mall actual battle

Column content
Jingdong Mall uni-app Project structures,
Jingdong Mall uni-app To configure tabBar & Window style
Jingdong Mall uni-app Developed subcontracting configuration
Jingdong Mall uni-app Developed rotation chart
Jingdong Mall uni-app The classified navigation area
Jingdong Mall uni-app Home floor products
Jingdong Mall uni-app Product classification page （ On ）
Jingdong Mall uni-app Product classification page （ Next ）
Jingdong Mall uni-app Custom search component （ On ）
Jingdong Mall uni-app Custom search component （ in ）
Jingdong Mall uni-app Custom search component （ Next ） – Search history
Jingdong Mall uni-app Product list page （ On ）

One 、 A summary of the premises

effect ： Implement a custom tabBar, Make message tabBar Able to display the number of messages , And through global sharing , Control the number of messages

---

The required knowledge points are as follows ：

1. mobx Auxiliary Library （ Global Shared , See article ）
2. vant Component library （ See article ）
3. Component's behavior （ See article ）
4. Custom components
5. Pattern isolation
6. Component data listener

Custom components are mainly divided into three steps （ Many instances implement the same process ）

1. Configuration information （ Almost everything to be achieved needs this step ）
2. Create a custom component code file
3. Write code
4. Detailed steps reference Official documents

---

Be careful ： In configuration customization tabBar when ,app.json in node list Can't delete , Because you still need to specify tabBar page , This is a tabBar Necessary configuration of , But these fields will not affect custom rendering .( If the lower version does not take effect , By default, this field is read and rendered ）

Official documents say

And default tabBar equally , stay app.json Only need to be in tabBar Node set ( custom = true Set to custom ）, Then you need to add code files ,

Code file

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxss
custom-tab-bar/index.wxml

We create the root directory custom-tab-bar file , Click generation component( Customize it as a component , This is related to Page navigation customization It's the same principle ）

The effect is as shown in the picture ：

At this time, the system automatically recognizes the file

Next use vant-weapp Component library for , Yes vant-weapp Components do not understand ,

We introduce vant Of tabBar Tag components

vant-weapp Official documents introduce tabBar label

Copy code , Put in index.json In the document components In nodes ( Local introduction ）

"usingComponents": {
    
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

According to official documents , To configure js Data and methods of documents , Can basically use

effect ：

Next, we customize the icon , See official documents ：

Remember slot Do you know how to use it , slot

In the corresponding tabbar-item Item directly into the picture , Through the slot slot Specify whether the picture is selected or not
stay vant Of tabbar The component source code actually accepts pictures for two slots , as follows ：

<slot name="icon"></slot>
<slot name="icon-active"></slot>

• Source code

<van-tabbar active="{
    { active }}" bind:change="onChange">
  <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{
    { icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{
    { icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
     Customize 
  </van-tabbar-item>
  <van-tabbar-item icon="search"> label </van-tabbar-item>
  <van-tabbar-item icon="setting-o"> label </van-tabbar-item>
</van-tabbar>

Page({
    
  data: {
    
    active: 0,
    icon: {
    
      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
      active: 'https://img.yzcdn.cn/vant/user-active.png',
    },
  },
  onChange(event) {
    
    this.setData({
     active: event.detail });
  },
});

We went to image Attributes of the tag src Just place our icon

There is no good icon material, see ： Icon library material

effect ：

among info It is the transfer parameter of the modified component , It can be set dynamically , You don't need to delete it

Next, we cycle through the icons , Configure our first instance tabbar Of list Nodes are copied to index.js Of data in , Components through wx:for loop list Array , Generate corresponding icon ,

• effect ：
  Picture styles can be defined by yourself style

Set up info The value of can be displayed on the icon , But we found that changing the icon would be out of range , Here's the picture

The reason is simple , yes vant There is a margin-bottom Lead to , We can set vant Component's css Global variable Settings

Modify the internal style of the component through the external style （ Pattern isolation ） Before , We need to set style isolation

“styleIsolation”: "shared"

• Configure in the parent component , Modify the configuration
  
  

stay index.js in

Component({
    
	"options":{
    
	"styleIsolation": "shared"
	}

Two 、 Dynamic display info news

• If not defined info False , No display , If 0 It's also false , Nor does it show that it meets our development needs
  

• Use mobx Global Shared

Ideas ：mobx Bind global control info

mobx Official documents

stay index.js The following configuration

// custom-tab-bar/index.js import {
     storeBindingsBehavior } from 'mobx-miniprogram-bindings' // Introduce creating binding instances  import {
     store } from '../store/store' //  Import warehouse store Component({
    
	behaviors:[storeBindingsBehavior], storeBindingsBehavior:[{
    
		store, fields:{
    
		sum: 'sum'
		}, actions:{
    
		}

binding sum Value to info

At the beginning, I didn't know how to synchronize sum and info Value , Even want to use Knowledge solution of component communication （ As we all know, component communication is troublesome ）,
But forget that components have a very good method ： Data listener (behavior)

a
Code interpretation ：
In the past, there was no need to put double quotation marks on the assignment object “” Of ,
however list Need to index to list[1] Because template syntax requires the form of double quotation marks 'list[1].info' ： a

• The effect is as follows

3、 ... and 、 Page switching effect

By changing the component's own Event binding function onChange solve （ Through its active Changes to use programmatic navigation （ The article introduction is being updated ） Indexes list Of url Path switching page

Code section

methods: {
    
	onChange(event) {
    
		// event.detail  The value of is the index of the currently selected item  this.setData({
    
			active: event.detail
		});
		wx.switchTab({
    
			url: String(this.data.list[event.detail].pagePath), // String Convert to string   Or add  ""  Implicit conversion , - 0  Then it is implicitly converted to an integer 
		})
	},

But after setting, the following situations will appear , The page has a normal jump , But the icon appears bug, among active In the component, it controls which page to jump to , by 0 Jump to a , by 1 Jump to the second , In debugging , I find active There is nothing wrong with the value of , According to reason, there should be no bug, So I think it should be when the page jumps , In the component active Will change , and js Of documents active That's all right.

resolvent ：
take active Storage to store Share globally

Add fields and methods

stay index.js In file modify onChnage function

methods: {
    
	onChange(event) {
    
		// event.detail  The value of is the index of the currently selected item  this.updataActive(event.detail) wx.switchTab({
    
			url: String(this.data.list[event.detail].pagePath), // String Convert to string   Or add  ""  Implicit conversion , - 0  Then it is implicitly converted to int
		})
	},

effect ：

Achieve success

Modify the label color value
Official documents found API

• design sketch ：
  

Four 、 Configuration summary

In fact, we all need to configure tabBar Of , Whether customized or not, it needs to be in app.json Of tarBar Node configuration , We can customize the configuration file tarBar The node is configured with complete attributes , Check that the effect is fine tuned , Then we are creating a customization file , Write code , Then we just configured list Put the node in custom-tab-bar Of index.js Of data In the index.wxml Change through loop traversal list Data realization effect , This process has several benefits

1. In some special cases, such as version incompatibility , It can still basically display the effect ,
2. There is no need to configure two places at the same time , stay app.json Node configuration list Copied to the index.js Of data, It can be achieved through page circulation , And all the circulating data can well meet the data requirements , Such as image link , Text etc.

---

	   Come here , If there are any questions 
 Welcome private bloggers to ask questions , Bloggers will do their best to answer your doubts ！
 	 🥳 If it helps you , Your praise is the greatest support for bloggers ！！🥳