WeChat applet custom tabbar component

This article shares the specific code of the WeChat applet custom tabbar component for your reference. The specific content is as follows

Due to project requirements, you must write your own components:

Step 1: Configure tabBar in App.json. Custom components must also be configured, "custom": true, configure all tabbar pages in list.

 "tabBar": {
 "custom": true,
 "color": "red",
 "selectedColor": "#3b81d7",
 "backgroundColor": "#000000",
 "list": [{
 "pagePath": "pages/Role/InsureIndex/index",
 "text": "Home"
 }, {
 "pagePath": "pages/Role/MineIndex/index",
 "text": "Home"
 }, {
 "pagePath": "pages/index/userInfo/userInfo",
 "text": "My"
 }]
 },

Step 2: Create a new component in the same directory as pages, folder name: custom-tab-bar, custom component file name: index. The component code is as follows, you should be able to understand it.

index.js

Component({
 properties: {},
 
 data: {
 indexImg: "../static/images/tabBar/[email protected]",
 indexSelectImg: "../static/images/tabBar/[email protected]",
 aboutUsImg: "../static/images/tabBar/[email protected]",
 aboutUsSelectImg: "../static/images/tabBar/[email protected]",
 _tabbat: null,
 iPhoneX: false,
 urls: ['/pages/Role/InsureIndex/index',
 '/pages/index/userInfo/userInfo'
 ]
 },
 attached() {
 var self = this
//This is business code, you don't need to look at wx.getStorage({
 key: 'userInfo',
 success: function (res) {
 const {
  userRoleCode
 } = res.data
 if (userRoleCode == '50' || userRoleCode == '70') {
  self.setData({
  ["urls[0]"]: '/pages/Role/MineIndex/index'
  })
 } else if (userRoleCode == '30' || userRoleCode == '35' || userRoleCode == '40') {
  self.setData({
  ["urls[0]"]: '/pages/Role/InsureIndex/index'
  })
 }
 }
 })
 wx.getSystemInfo({
 success(res) {
 console.log(res.model)
 if (res.model.indexOf('iPhone X') >= 0) {
  self.setData({
  iPhoneX: true
  })
 }
 }
 })
 },
 /**
 * List of component methods */
 methods: {
 switchTap: function (e) {
 var self = this
 var index = e.currentTarget.dataset.index;
 var urls = self.data.urls
 wx.switchTab({
 url: urls[index],
 })
 }
 }
})

index.wxml

<div class="_tabbar {{iPhoneX?'_iPhoneX':''}}">
 <div class="titem {{_tabbat==0?'tCdk':''}}" data-index="0" bind:tap="switchTap">
 <image src="{{_tabbat==0?indexSelectImg:indexImg}}" />
 <b>Home</b>
 </div>
 <div class="titem {{_tabbat==1?'tCdk':''}}" data-index="1" bind:tap="switchTap">
 <image src="{{_tabbat==1?aboutUsSelectImg:aboutUsImg}}" />
 <b>My</b>
 </div>
</div>

index.wxss

._tabbar {
 width: 100%;
 height: 120rpx;
 display: flex;
 align-items: center;
 background: #fff;
 font-size: 26rpx;
 color: #999999;
 box-shadow: 0px -7rpx 13rpx 0px rgba(193, 185, 204, 0.13);
}
 
._tabbar .titem {
 text-align: center;
 width: 50%;
}
 
._tabbar .titem image {
 display: block;
 margin: auto;
 width: 48rpx;
 height: 48rpx;
 margin-bottom: 10rpx;
}
 
._tabbar .tCdk {
 color: #37ADFE;
}
 
._iPhoneX {
 height: 148rpx;
}

index.json

{
 "component": true,
 "usingComponents": {}
}

The above is the component code. When you click the tabbar to jump to the page, the tabbar component will be reloaded, causing the selected style to always be the default. Therefore, you need to do the following in the js file of the page that uses the tabbar: (Take the "Home" page as an example)

onShow: function () {
 this.getTabBar().setData({
 _tabbat: 0
 })
 },

The above is complete, but I saw online that two tabBars will appear. I don't see them here (one custom, one built-in). If they appear, add wx.hideTabBar() to the onLaunch function in app.js to hide the built-in tabbar.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

WeChat Mini Program official dynamic custom bottom tabBar example
Detailed explanation of WeChat applet custom tabBar adaptation in uni-app
Detailed explanation of the development of WeChat applet custom tabBar component
How to customize the color of the top border of the WeChat applet tabbar
Implementation of custom tabBar in WeChat applet development
WeChat applet custom sliding top TabBar tab to achieve page switching function example
WeChat applet custom tabBar stepping practice record
WeChat applet custom tabbar custom-tab-bar 6s does not come out solution (cover-view is incompatible)
WeChat applet custom menu switch bar tabbar component code example
WeChat applet custom tabBar step record

<<: How to build a new image based on an existing image in Docker

>>: MySQL installation and configuration tutorial for Mac