当前位置:   article > 正文

微信小程序开发---自定义底部tabBar_微信小程序自定义底部tab组件

微信小程序自定义底部tab组件

自定义tabBar注意事项:

  • 在自定义 tabBar 模式下 ,为了保证低版本兼容以及区分哪些页面是 tab 页,app.json文件中 tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的渲染。
  • 所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式,以保证 tabBar 层级相对较高。(不使用也没关系)
  • 与 tabBar 样式相关的接口,如 wx.setTabBarItem 等将失效。
  • 每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar 接口,获取当前页面的自定义 tabBar 组件实例。例如:如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态。

实现步骤:

1. 配置信息

  • 在 app.json 中的 tabBar 项指定 custom 字段值为 true,同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
  • 代码示例 ( app.json中的配置项):
    1. "tabBar": {
    2. "custom": true,
    3. "color": "#000000",
    4. "selectedColor": "#CBB486",
    5. "borderStyle": "white",
    6. "list": [
    7. {
    8. "pagePath": "pages/member-announce/index",
    9. "text": "公告",
    10. "iconPath": "/public/img/icon-announce.png",
    11. "selectedIconPath": "/public/img/icon-announce-selected.png"
    12. },
    13. {
    14. "pagePath": "pages/member-operation/index",
    15. "text": "活动",
    16. "iconPath": "/public/img/icon-operation.png",
    17. "selectedIconPath": "/public/img/icon-operation-selected.png"
    18. },
    19. {
    20. "pagePath": "pages/space-map/index",
    21. "text": "空间",
    22. "iconPath": "/public/img/icon-spaceNew.png",
    23. "selectedIconPath": "/public/img/icon-space-selectedNew.png"
    24. },
    25. {
    26. "pagePath": "pages/member-center/index",
    27. "text": "我的",
    28. "iconPath": "/public/img/icon-centerNew.png",
    29. "selectedIconPath": "/public/img/icon-center-selectedNew.png"
    30. }
    31. ]
    32. },

其中 iconPath 代表未被选中时的 icon 图标,selectedIconPath 代表当前被选中时的  icon图标。

2. 添加 tabBar 代码文件

  • 在代码根目录下添加入口文件 
    • 文件名必须为 custom-tab-bar
    • 必须在根目录处添加(与page文件同级)
  1. custom-tab-bar/index.js
  2. custom-tab-bar/index.json
  3. custom-tab-bar/index.wxml
  4. custom-tab-bar/index.wxss

3. 编写tabBar代码

自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。

4. 实现tabBar选中态:

在 tabBar 所在页面的 js或ts 文件中的onShow方法写入:

  1. onShow() {
  2. if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  3. this.getTabBar().setData({
  4. selected: 0 // 当前页面所在数据的索引值
  5. })
  6. }
  7. },

大家可根据上述步骤一步步实现,下面是我的代码demo。先配置好上述步骤中标红的1、2,再赋值下面代码,最后再在每个tabBar所在的页面配置好选中态,再根据项目需求调整即可。

自定义 tabBar 代码示例分享:

custom-tab-bar文件中的index.wxml:

  1. <view class="tab-bar">
  2. <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
  3. <view wx:if="{{item.bulge}}" class="tab-bar-bulge tab-bar-view"></view>
  4. <image class="image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
  5. <view wx:if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}" class="tab-bar-view">{{item.text}}</view>
  6. </view>
  7. </view>

custom-tab-bar文件中的index.ts:(我这里用的是ts,用js的伙伴稍微改一下类型就可以)

  1. Component({
  2. data: {
  3. color: "#545454",
  4. selectedColor: "#CBB486",
  5. backgroundColor: "#fff",
  6. list:[
  7. {
  8. pagePath: "/pages/member-announce/index",
  9. text: "公告",
  10. iconPath: "/public/img/icon-announce.png",
  11. selectedIconPath: "/public/img/icon-announce-selected.png"
  12. },
  13. {
  14. pagePath: "/pages/member-operation/index",
  15. text: "活动",
  16. iconPath: "/public/img/icon-operation.png",
  17. selectedIconPath: "/public/img/icon-operation-selected.png"
  18. },
  19. {
  20. pagePath: "",
  21. bulge: true,
  22. iconPath: "/public/img/icon-chat-ai.png",
  23. selectedIconPath: "/public/img/icon-chat-ai.png"
  24. },
  25. {
  26. pagePath: "/pages/space-map/index",
  27. text: "空间",
  28. iconPath: "/public/img/icon-spaceNew.png",
  29. selectedIconPath: "/public/img/icon-space-selectedNew.png"
  30. },
  31. {
  32. pagePath: "/pages/member-center/index",
  33. text: "我的",
  34. iconPath: "/public/img/icon-centerNew.png",
  35. selectedIconPath: "/public/img/icon-center-selectedNew.png"
  36. },
  37. ],
  38. },
  39. methods: {
  40. switchTab(e: { currentTarget: { dataset: any } }) {
  41. const data = e.currentTarget.dataset
  42. const url = data.path
  43. if (url === '') {
  44. const token = wx.getStorageSync("token");
  45. wx.navigateTo({ url: token ? "/pages/member-chat-ai/index" : "/pages/login/index" });
  46. } else {
  47. console.log(url);
  48. wx.switchTab({ url });
  49. }
  50. }
  51. }
  52. })

custom-tab-bar文件中的index.wxss:

  1. .tab-bar {
  2. position: fixed;
  3. bottom: 0;
  4. left: 0;
  5. right: 0;
  6. /* 兼容 iOS < 11.2 */
  7. height: calc(96rpx + constant(safe-area-inset-bottom));
  8. /* 兼容 iOS >= 11.2 */
  9. height: calc(96rpx + env(safe-area-inset-bottom));
  10. background: #fff;
  11. display: flex;
  12. box-shadow: 0px -10rpx 12rpx rgba(0, 0, 0, 0.08);
  13. }
  14. .tab-bar-item {
  15. flex: 1;
  16. text-align: center;
  17. display: flex;
  18. justify-content: center;
  19. align-items: center;
  20. flex-direction: column;
  21. }
  22. .tab-bar-item .image {
  23. width: 48rpx;
  24. height: 48rpx;
  25. }
  26. .bulge {
  27. background-color: #fff;
  28. }
  29. .bulge .image {
  30. position: absolute;
  31. width: 96rpx;
  32. height: 96rpx;
  33. top: 13rpx;
  34. }
  35. .tab-bar-item .tab-bar-view {
  36. font-size: 20rpx;
  37. }

custom-tab-bar文件中的index.json:

  1. {
  2. "component": true
  3. }

不要忘记设置选中态:

底部效果如图:

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号