微信小程自定tabbar

在查看官放的自定tabbar时遇到的问题

一、新建 custom-tab-bar 组件（项目根目录下）

custom-tab-bar 目录结构如下:

二、在app.json 中配置 tabbar

注意：这里没有设置选中图片，可以自行设置

1、设置 custom 为 true

2、页面一定要在 pages 中

三、在app.json 中配置 tabbar

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>

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;
}

index.js 使用官方例子代码 (主要此页面的 pagePath路径要以 / 开头)

Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#3cc51f",list: [{pagePath: "/pages/index/index",text: "组件"}, {pagePath: "/pages/page2/page2",text: "page2"}]},attached() {},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({ url })this.setData({selected: data.index})}}
})

现在 tabbar 配置完成，但是会出现如下问题。

在开发微信小程序是遇到自动定义tar时，当点击自定好的item时，选中状态还是默认第一个。

这是怎么回事呢？

你可以在生命周期函数中使用如下代码差可能当前选中 id ，发现都是 0 ；

this.getTabBar().data.selected

解决办法：

在官方给出的代码中，其实是有的，只是自己没注意；

在每个页面设置 selected 为你要的 id （ 0 1 2 等）

这个是组件函数是的页面生命周期，如果是页面设置在 onshow 中就可以。(注意不要设置在 onLoad 中不然只有加载时才能触发)

官方链接: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

关注公众号学习跟多技术