微信小程序开发 tabbar组件常见问题

一、 tabbar不显示问题

问题

刚开始我在app.json中配置了下面的代码，但tabbar并没有显示。代码如下：

"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tPages/tPage1","text": "首页"},{"pagePath": "pages/tPages/tPage2","text": "我的"}]}

通过官方文档了解到，可以通过自定义组件来实现自定义tabbar（微信小程序官方文档）

解决

仿照官网提供的例子对比看自己的问题在哪里
参考官方文档，我对程序做出了如下调整：

首先在项目的根目录下添加了custom-tab-bar文件夹，在此文件夹下新增了一个组件。

【js代码如下】


Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {selected: 10,color: "#7A7E83",selectedColor: "#3cc51f",list: [{"pagePath": "pages/tPages/tPage1","text": "首页"},{"pagePath": "pages/tPages/tPage2","text": "我的"}]},attached() {},/*** 组件的方法列表*/methods: {switchTab(e) {const data = e.currentTarget.datasetconst iUrl = data.pathconsole.log('/'+iUrl)wx.switchTab({url: '/'+iUrl,success: function (e) {var page = getCurrentPages().pop();if (page == undefined || page == null) return;page.onLoad();}})this.setData({selected: data.index})}}
})

【wxml代码如下】

<view class="tab-bar"><view class="tab-bar-border"></view><view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><view>{{selected}}</view><view style="color: {{selected === index ? selectedColor : color}}">{{index}}-{{item.text}}-{{item.pagePath}}</view></view>
</view>

【json代码如下】

{"component": true
}

【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 image {width: 27px;height: 27px;
}.tab-bar-item view {font-size: 10px;
}

在pages文件夹下新建一个文件夹放你的tab相关的各类文件。这里我主要是新建了两个组件，也就是我需要在tabbar里显示的内容。（这步我本来就做好了，如果你的tabbar不显示可以对比看看是不是哪里配置错了）
两个组件差不多，这里就记录一个吧。
【js代码如下】

// tPage1.js
Component({pageLifetimes: {show() {if ( typeof this.getTabBar === 'function'&& this.getTabBar() ){ this.getTabBar().setData({ selected: 0 })}}}
})

【json代码如下】

{"usingComponents": {}
}

【wxml代码如下】

<scroll-view class="scrollarea" scroll-y type="list"><view class="container">这里是第一个页面！</view>
</scroll-view>

【wxss无代码】

最后检查app.json中的配置
※ pages中是否将所有的tab页面配置完整，保证无遗漏
※ tabBar的配置需要添加custom配置为true
※ tabBar中list里面的pagePath一定不要配错了！

{"pages": ["pages/tPages/tPage1","pages/tPages/tPage2"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"},"tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/tPages/tPage1","text": "首页"},{"pagePath": "pages/tPages/tPage2","text": "我的"}]}
}