开始前,请先完成底部导航的开发,详见
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
https://sunshinehu.blog.csdn.net/article/details/128705866
显然,纯文字的底部导航有点low,还是需要有图标的才酷,下面我们一起来实现
1. 修改 tabBar 配置
在 app.json 的 tabBar 配置中新增
"custom": true,
即启用用户自定义的 tabar,但之前的 list 配置留着,别删 !!!
2. 添加自定义的 tabBar 代码
在项目目录下新建文件夹 custom-tab-bar
(必须是这个名字!)
文件夹中依次创建以下文件
export default [
{
icon: 'home',
text: '首页',
url: 'pages/index/index',
},
{
icon: 'usergroup',
text: '家庭成员',
url: 'pages/member/index',
},
{
icon: 'tips',
text: '圆梦宝典',
url: 'pages/bible/index',
},
{
icon: 'user',
text: '我的世界',
url: 'pages/me/index',
},
];
import TabMenu from './data';
Component({
data: {
active: 0,
list: TabMenu,
},
methods: {
onChange(event) {
this.setData({ active: event.detail.value });
wx.switchTab({
url: this.data.list[event.detail.value].url.startsWith('/')
? this.data.list[event.detail.value].url
: `/${this.data.list[event.detail.value].url}`,
});
},
init() {
const page = getCurrentPages().pop();
const route = page ? page.route.split('?')[0] : '';
const active = this.data.list.findIndex(
(item) =>
(item.url.startsWith('/') ? item.url.substr(1) : item.url) ===
`${route}`,
);
this.setData({ active });
},
},
});
{
"component": true,
"usingComponents": {
"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
"t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item",
"t-icon": "tdesign-miniprogram/icon/icon"
}
}
<t-tab-bar
value="{{active}}"
bindchange="onChange"
split="{{false}}"
>
<t-tab-bar-item
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="index"
>
<view class="custom-tab-bar-wrapper">
<t-icon name="{{item.icon}}" size="48rpx" />
<view class="text">{{ item.text }}view>
view>
t-tab-bar-item>
t-tab-bar>
.custom-tab-bar-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.custom-tab-bar-wrapper .text {
font-size: 20rpx;
}
3. 解决导航高亮需点击两次的问题
本以为通过以上两步就ok了,结果实际使用时,会发现切换底部导航时,页面切换了,但导航没有变高亮,需要再多点击一次才行……
解决方案如下:
在每个页面的 .js
文件中添加
onShow() {
this.getTabBar().init();
},
即在每次页面显示时,对底部导航进行一次初始化。