需求：有首页和我的两个tabbar页面，点击我的时判断是否登录，如果未登录跳转到登录页，如果已登录进入到我的页面
第一部分：配置app.json：
{ "pages": [ "pages/index/index", "pages/center/center", "pages/login/login" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "custom": true, "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/tabBarIcon-index.png", "selectedIconPath": "images/tabBarIcon-index-HL.png" }, { "pagePath": "pages/center/center", "text": "我的", "iconPath": "images/tabBarIcon-center.png", "selectedIconPath": "images/tabBarIcon-center-HL.png" } ] }, "sitemapLocation": "sitemap.json" }第二部分：编写tabBar代码： 在根目录新建custom-tab-bar文件夹，并在文件夹中创建文件： custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-bar/index.wxss
custom-tab-bar/index.js中的代码
const app = getApp() Component({ data: { selected: 0, color: "#666", selectedColor: "#02c260", list: [{ pagePath: "/pages/index/index", iconPath: "/images/tabBarIcon-index.png", selectedIconPath: "/images/tabBarIcon-index-HL.png", text: "首页" }, { pagePath: "/pages/center/center", iconPath: "/images/tabBarIcon-center.png", selectedIconPath: "/images/tabBarIcon-center-HL.png", text: "我的" }] }, attached() {}, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path if (url === '/pages/center/center' && !app.globalData.isLogin) { wx.navigateTo({ url: '/pages/login/login' //可以带参数，在登录页面接收 }) return; } this.setData({ selected: data.index }) wx.switchTab({ url }) } } })custom-tab-bar/index.json中的代码
{ "component": true }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}}" data-index="{{index}}" bindtap="switchTab"> <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image> <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view> </cover-view> </cover-view>custom-tab-bar/index.wxss中的代码
.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); } .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; }第三部分：业务页面代码：
pages/index/index.js中
Page({ data: { }, onLoad: function (options) { }, onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 }) } } })pages/center/center.js中
Page({ data: { }, onLoad: function (options) { }, onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 1 }) } } })pages/logon/login.js中执行登录
const app = getApp() Page({ login () { app.globalData.isLogin = true; wx.showToast({title: '登录成功'}) wx.navigateBack() }, data: { }, onLoad: function (options) { } })