0. 官方指南

# 由于微信小程序的异步机制，页面跳转会出现随机事件# 目的： 解决认证跳转过程的不友好体验https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1. app.json文件的处理

1. 添加："custom": true,使用自定义的tabbar2. 将非tabbar的内容删除，删除的示例是发布，如下："tabBar": {"custom": true,"selectedColor": "#CD5C5C","list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "static/tabbar/ic_menu_choice_nor.png", "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png" }, { "pagePath": "pages/auction/auction", "text": "拍卖", "iconPath": "static/tabbar/ic_menu_me_nor.png", "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png" }, { "pagePath": "pages/message/message", "text": "消息", "iconPath": "static/tabbar/ic_menu_me_nor.png", "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png" }, { "pagePath": "pages/index/index", "text": "我的", "iconPath": "static/tabbar/ic_menu_me_nor.png", "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png" }]

},

2. 创建组件目录

-component -tabBar -tabbar.js -tabbar.json -tabbar.wxml -tabbar.wxss 

3. js文件解读：

// component/tabbar/tabbar.jsvar app = getApp()Component({ /** * 组件的属性列表：selected--标记tabbar的index， */ properties: { selected: { type: Number, value: 0 } }, /** * 组件的初始数据 */ data: { color: "#7A7E83", "selectedColor": "#CD5C5C", "list": [ { "pagePath": "/pages/home/home", "text": "首页", "iconPath": "/static/tabbar/ic_menu_choice_nor.png", "selectedIconPath": "/static/tabbar/ic_menu_choice_pressed.png" }, { "pagePath": "/pages/auction/auction", "text": "拍卖", "iconPath": "/static/tabbar/ic_menu_me_nor.png", "selectedIconPath": "/static/tabbar/ic_menu_me_pressed.png" }, { "text": "发布", }, { "pagePath": "/pages/message/message", "text": "消息", "iconPath": "/static/tabbar/ic_menu_me_nor.png", "selectedIconPath": "/static/tabbar/ic_menu_me_pressed.png" }, { "pagePath": "/pages/index/index", "text": "我的", "iconPath": "/static/tabbar/ic_menu_me_nor.png", "selectedIconPath": "/static/tabbar/ic_menu_me_pressed.png" } ] }, /** * 组件的方法列表 * switchTab：跳转到tabbar页面，即首页，拍卖，消息，我的，四个自定义tabbar页面 * navigateTo：只能跳转到非tabbar页面，示例是发布页面："/pages/publish/publish" */ methods: { switchTab(e) { var data = e.currentTarget.dataset var url = data.path; console.log(url) if (url) { wx.switchTab({ url }); } else { if (app.globalData.userinfo) { wx.navigateTo({ url: "/pages/publish/publish", }) } else { wx.navigateTo({ url: '/pages/login/login', }) } } } }})

3. js文件解读：

# component：true ---即表示使用自定义tabbar{"component": true,"usingComponents": {}}

wxml 文件示例

# wx:for 循环list列表，生成自定义的tabbar标签# 三元运算表达式：判断tabbar标签是否选中 - src="{{selected === index ? item.selectedIconPath : item.iconPath}}"<!--miniprogram/custom-tab-bar/index.wxml--><cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" bindtap="switchTab"> <block wx:if="{{ index === 2}}"> <cover-view class="pub">{{item.text}}</cover-view> </block> <block wx:else> <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image> <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view> </block> </cover-view></cover-view>

4. wxss 文件示例

.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); z-index:998}.tab-bar-border { background-color: rgba(0, 0, 0, 0.33); position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform: scaleY(0.5);}.tab-bar-item { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;}.tab-bar-item cover-image { width: 27px; height: 27px;}.tab-bar-item cover-view { font-size: 10px;}.pub{ background-color: #fa3d; height: 80rpx; width: 80rpx; border-radius: 50%; display: flex; flex-direction: row; justify-content: center; align-items: center;}

5. 应用实例：home页面(tabbar)

# 两步骤即可 - selected：即为tabbar.js 文件中的properties属性列表， - selected: 标记tabbar的index，1. home.json: "tabbar": "/component/tabBar/tabBar" - { "usingComponents": { "tabbar": "/component/tabBar/tabBar" }, "enablePullDownRefresh": true } 2. home.wxml: - <tabbar selected="{{0}}"></tabbar> - ......

6. 对于非tabbar的发布，不用做任何操作