原生小程序自定义 tabBar

原生小程序自定义 tabBar

步骤:

1.配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

{ "tabBar": { "custom": true, "color": "#000000", "selectedColor": "#000000", "backgroundColor": "#000000", "list": [{ "pagePath": "page/component/index", "text": "组件" }, { "pagePath": "page/API/index", "text": "接口" }] }, "usingComponents": {} }

2.添加tabBar代码文件 (这一个文件夹都要添加进去)

可以去官网:指南里面有一个自定义tabBar ,里面有方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OhuFNlnk-1593522300892)(C:\Users\l\AppData\Roaming\Typora\typora-user-images\image-20200630204716857.png)]

3.在这个文件夹里面修改内容

index.js:::

Component({ data: { active: 0, color: "#7A7E83", selectedColor: "#3cc51f", list: [{ "pagePath": "pages/home/home", "text": "home", "iconPath": "/assest/tabs/home.png", "selectedIconPath": "/assest/tabs/home-active.png", "icon": "home-o" }, { "pagePath": "pages/message/message", "text": "message", "iconPath": "/assest/tabs/message.png", "selectedIconPath": "/assest/tabs/message-active.png", "icon": "friends-o" }, { "pagePath": "pages/profile/profile", "text": "profile", "iconPath": "/assest/tabs/profile.png", "selectedIconPath": "/assest/tabs/profile-active.png", "icon": "setting-o" } ] }, onLoad() { this.setData({ active: 0 }) } , attached() { }, methods: { switchTab(e) { wx.switchTab({ url: "/" + this.data.list[e.detail].pagePath }) } } })

index.json::::

{ "usingComponents": { "van-tabbar": "../weapp/dist/tabbar", "van-tabbar-item": "../weapp/dist/tabbar-item/index" } }

index.wxml:::

<van-tabbar active="{{ active }}" bind:change="switchTab"> <van-tabbar-item icon="{{item.icon}}" wx:for="{{list}}" data-path="{{item.pagePath}}" data-index="{{index}}" wx:index="{{index}}">{{item.text}} </van-tabbar-item> </van-tabbar>

4.修复一些跳转的bug:::(官方组件带来的bug)

在app.js里面添加

globalData: { host: ' http://localhost:3000/', active: 0 }

同时,在每个需要跳转的页面的onShow生命周期函数里面写上::

onShow: function () { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ active: 0//这里,第一个页面就写 0 第二个就写 1..... }) } }