AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【微信小程序】-- 案例 - 自定义 tabBar（四十六）

2024-03-15 525
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【微信小程序】-- 案例 - 自定义 tabBar（四十六）


一、自定义 tabBar

  前面已经介绍了分包-独立分包 & 分包预下载，通过栗子学习了如何设置独立分包以及分包预下载。接下来就来根据前面学的知识，在案例 - 自定义 tabBar上进行实践。话不多说，让我们原文再续，书接上回吧。


1、案例效果

  首先来看一下页面演示效果，页面中有下方标签栏是自定义 tabBar。自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

  在此案例中，用到的主要知识点如下：

  • 自定义组件
  • Vant 组件库
  • MobX 数据共享
  • 组件样式隔离
  • 组件数据监听器
  • 组件的 behaviors
  • Vant 样式覆盖

2、实现步骤

  首先来实现 tabBar 标签栏，自定义 tabBar 可分为 3 大步骤，分别是：

  • Step 1、配置信息

  在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

app.json

{
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系夜阑",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    }]
  },
}

  注意：当配置自定义 tarBar 页面时，list 属性不能删除，为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

  • Step 2、添加 tabBar 代码文件

  在代码根目录下添加入口文件，这里的文件夹名一定是 custom-tab-bar，然后在创建 index 组件（index命名也不能随便改，就用 index，否则无法识别）。

  当 custom 参数为 true 时，小程序就会自动识别 custom-tab-bar 里面的文件，并将其渲染出来。

  • Step 3、编写 tabBar 代码

  用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。这里使用 Vant Weapp 底部导航栏，用于在不同页面之间进行切换。

1、引入

  在 app.json 或 index.json 中引入组件，这里对组件进行全局引用，具体代码如下所示：

app.json

{
  "usingComponents":{
    "my-test1": "/components/test1/test1",
    "my-test2": "/components/test2/test2",
    "my-test3": "/components/test3/test3",
    "my-test4": "/components/test4/test4",
    "my-test5": "/components/test5/test5",
    "van-button": "@vant/weapp/button/index",
    "my-numbers": "./components/numbers/numbers",
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  },
}

2、基础用法

index.wxml

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

index.js

Component({
  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
    },
  }
})

  可以来看一下运行效果：

3、自定义图标

  知道怎么引用 Vant 组件之后，接下来就根据需求来对其进行修改，可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。来看一下 vant 提供的参数 TabbarItem Slot：

名称 说明
icon 未选中时的图标
icon-active 选中时的图标

index.wxml

  通过 wx: for 将标签栏渲染到页面上。

<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

index.js

  将 app.json 里的 list 数组放在自定义 tabBar 组件中的 data 数据，然后通过循环渲染到页面上。

Component({
  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系夜阑",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    }]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
    },
  }
})

  此时可以看到已经成功把 list 数组里的图片都渲染出来了，来看一下运行效果：

  详细步骤，可以参考小程序官方给出的 文档 。

3、渲染 tabBar 上的数字徽标

  • 渲染数字徽标

  通过 van-tabbar-item 上 info 属性可以对 tabBar 渲染数字，具体代码如下所示：

index.wxml

<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="2">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

  可以看当对 tabBar 加上数字徽标时，就溢出 tabBar 页面范围。此时需要美化 tabBar 页面， 通过调试器可以看到，图标与标签名中间有间隔。

  在网页开发中，橘黄色的部分代表 margin 。

  • 美化样式

  从上图可以发现，margin-bottom: var(--tabbar-item-margin-bottom,5px);，其中 var 是css中用来引用变量的，当 --tabbar-item-margin-bottom 不存在的时候，就默认为 5px。所以只要重置其 margin-bottom 的值，数字徽标就不会超出 tabBar 范围。

index.wxss

.van-tabbar-item{
  --tabbar-item-margin-bottom: 0,
}

注意：在自定义组件中使用 Vant Weapp 组件时，需开启 styleIsolation: ‘shared’ 选项

index.js

Component({
  options: {
    styleIsolation: 'shared',
  },
});

  可以来看一下运行效果：

  • 按需添加数字徽标

  在实际开发过程中，并不是所以图标都需要添加数字徽标的，所以不能 info 属性将其写死。这里需要把 store 里面的数据绑定组件中进行使用，然后通过数据监听器将数据变化传到数字图标上，具体代码如下所示：

index.wxml

  通过判断是否有 info 属性来显示该数字图标，当 info 属性不存在或者为 0 的时候都不显示。

<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info : ''}}">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

index.js

  在消息图标后添加 info 属性。

// custom-tab-bar/index.js
// 导入
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../store/store'
Component({
  // 挂载
  behaviors: [storeBindingsBehavior],
  // 全局数据操作
  storeBindings: {
    store,
    fields:{
      sum: 'sum'
    },
    actions: {}
  },
  // 数据监听
  observers:{
    "sum": function (value){
      this.setData({
        "list[1].info": value
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png",
      info: 2
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系夜阑",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    }]
  },
})

  可以看到对全局数据进行操作时，消息的数字徽标也会随着变化，运行效果如下所示：

4、实现tabBar 页面切换效果

  通过监听 tabBar 的 change 事件，得到当前选中项的索引，根据这个索引找到对应页面路径，最后用 wx.switchTab 进行页面跳转。

store.js

  不用在组件data 里面定义选中项的索引，不然会出现问题（坑点），最好定义在 store 中，先在 store 定义变量和修改方法。

export const store = observable({
  // 需要挂载的数据 -- 数据字段
  numA: 1,
  numB: 3,
  name: "我是夜阑的狗",
  activeTabBarIndex: 0,
  // 计算属性 -- get为修饰符
  get sum(){
    return this.numA + this.numB;
  },
  // actions 函数，专门来修改 store 中数据的值
  updateNum1: action(function(step){
    this.numA += step;
  }),
  updateNum2: action(function(step){
    this.numB += step;
  }),
  updateName: action(function(name){
    this.name = name;
  }),
  updateActiveTabBarIndex: action(function(index){
    this.activeTabBarIndex = index;
  })
})

index.js

  将全局数据里的索引变量和修改方法挂载到组件中。

// custom-tab-bar/index.js
// 导入
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../store/store'
Component({
  // 挂载
  behaviors: [storeBindingsBehavior],
  // 全局数据操作
  storeBindings: {
    store,
    fields:{
      sum: 'sum',
      active: 'activeTabBarIndex'
    },
    actions: {
      updateActive: 'updateActiveTabBarIndex'
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      // this.setData({ active: event.detail });
      this.updateActive(event.detail);
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },
  }
})

注意：这里页面路径 一定要以斜线根路径开头，否则无法识别。

  可以来看一下运行效果：

5、修改 tabBar 选中项文本的颜色值

  最后就是来修改 tabBar 选中项文本的颜色值，来看一下 Vant 提供 tabBar 参数 Tabbar Props ：

参数 说明 类型 默认值
active 当前选中标签的索引 number -
fixed 是否固定在底部 boolean true
placeholder 固定在底部时，是否在标签位置
生成一个等高的占位元素		 boolean false
border 是否展示外边框 boolean true
z-index 元素 z-index number 1
active-color 选中标签的颜色 string #1989fa
inactive-color 未选中标签的颜色 string #7d7e80
safe-area-inset-bottom 是否为 iPhoneX 留出底部安全距离 boolean true

index.wxml

<van-tabbar active="{{active}}" bind:change="onChange" active-color='#13A7A0'>
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info : ''}}">
    <image
      slot="icon"
      src="{{ item.iconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{ item.selectedIconPath }}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

  可以来看一下运行效果：

总结

  感谢观看，这里就是案例 - 自定义 tabBar的介绍，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。

文章标签：
小程序
索引
前端开发
安全
JSON
关键词：
微信案例
微信tabbar
微信小程序tabbar
微信小程序自定义
微信自定义
我是夜阑的狗
目录
相关文章
赣州云智科技的技术铺子
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器，实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序，详细解析了俯卧撑动作的检测规则构建与执行流程，涵盖卧撑和撑卧两个姿态的识别规则，以及如何通过继承`sports.SportBase`类实现运动分析器，适用于小程序开发者。
赣州云智科技的技术铺子
57 16
赣州云智科技的技术铺子
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数01
随着AI技术的发展，AI运动APP如雨后春笋般涌现，如“乐动力”、“天天跳绳”等，推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序，利用“云智AI运动识别小程序插件”，介绍运动识别原理、计量方式及运动分析器基类的使用，帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
赣州云智科技的技术铺子
68 16
恩爸编程
|
26天前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程，包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等，并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
恩爸编程
39 3
DK方方
|
17天前
|
小程序 前端开发 数据挖掘
圈子论坛社区交友系统开源版小程序源码，自定义小程序管理社区圈子软件开发，打造受欢迎社交圈
通过获取开源版小程序源码、进行自定义小程序管理社区圈子软件开发以及注重用户体验和功能模块的设计，可以打造一个受欢迎的社交圈。同时，需要不断优化和完善系统，以满足用户不断变化的需求和期望。
DK方方
59 0
開发-I88I9Z88OZ4
|
2月前
|
监控 小程序 前端开发
排队免单小程序开发源码案例
“排队免单小程序”旨在通过用户排队行为结合特定规则为用户提供免单或优惠机会，提升用户体验及商家流量。核心功能包括用户注册登录、排队管理、免单规则设置、支付与结算、商家管理和通知提醒等。技术上采用微信小程序开发框架，前后端分离架构，集成微信支付等服务，确保高效安全的数据处理与传输。项目开发过程涵盖需求分析、设计开发、集成测试和上线发布，后期注重数据监控、用户反馈和运营推广，以持续优化用户体验。
開发-I88I9Z88OZ4
49 5
開发-I88I9Z88OZ4
|
2月前
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统，为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化，确保稳定运行和良好体验。最后，通过提交审核、上线运营和推广策略，吸引更多用户和商家入驻。
開发-I88I9Z88OZ4
50 3
邹荣乐
|
3月前
|
小程序
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
邹荣乐
722 1
chnjames
|
3月前
|
小程序 搜索推荐 API
微信小程序：自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改，但产品经理的需求却需要个性化的定制。在这种情况下，我们需要寻找解决方案，以满足这些特殊需求，尽管这可能有点棘手。
chnjames
93 0
微信小程序：自定义关注公众号组件样式
開发-I88I9Z88OZ4
|
3月前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先，明确你的短剧平台的目标用户群体和他们的需求。比如，年轻用户可能更倾向于轻松、幽默的短剧内容，而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
開发-I88I9Z88OZ4
51 0
邹荣乐
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
813 7

热门文章

最新文章

  • 1
    【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？
  • 2
    【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？
  • 3
    uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
  • 4
    【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？
  • 5
    【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
  • 6
    为什么不加盟线下陪玩APP小程序平台，而是自建平台？
  • 7
    【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数01
  • 8
    【一步步开发AI运动小程序】十、姿态动作相似度比较
  • 9
    uni-app开发AI康复锻炼小程序，帮助肢体受伤患者康复！
  • 1
    微信小程序用户登陆和获取用户信息功能实现
    147
  • 2
    uniapp-微信小程序-上拉和下拉触底刷新
    164
  • 3
    微信小程序和springboot实现微信支付
    275
  • 4
    微信小程序-微信支付
    88
  • 5
    微信小程序调试、断点调试
    226
  • 6
    微信小程序-分包
    82
  • 7
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1278
  • 8
    微信小程序echart图片不显示 问题解决
    79
  • 9
    【DevOps】（五）Jenkins构建给企业微信推送消息
    310
  • 10
    UniApp与微信小程序介绍及区别
    643

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 《使用Serverless服务快速开发小程序》
  • 《云市场-小程序》
  • 数字乡村建设方案

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • 星轨-钉钉APP分发实训
    • 下一篇
    开通oss服务