【微信小程序开发】自定义tabBar案例(定制消息99+小红心)

简介: 【微信小程序开发】自定义tabBar案例(定制消息99+小红心)

文章目录

一、前提概要

效果:实现一个自定义tabBar,使消息tabBar能够显示消息数量,并通过全局共享的方式,控制消息数量67.gif


需要的知识点如下:

  1. mobx辅助库(全局共享,见文章)
  2. vant组件库(见文章)
  3. 组件的behavior (见文章)
  4. 自定义组件
  5. 样式隔离
  6. 组件数据监听器

自定义组件主要分为三个步骤(许多实例实现步骤差不多流程)

  1. 配置信息 (几乎每个要实现的都需要这一步)
  2. 创建自定义组件代码文件
  3. 编写代码
  4. 详细步骤参考官方文档

注意:在配置自定义tabBar时,app.json中节点list不能删除,因为仍需要指定tabBar页面,这是tabBar的必要配置,但是这些字段不会影响自定义渲染。(如果低版本不生效,默认读取该字段渲染)

官方文档如是说图片.png

和默认tabBar一样,在app.json 中仅需要在tabBar节点设置( custom = true 设置为自定义),然后需要添加代码文件,

代码文件

custom-tab-bar/index.js

custom-tab-bar/index.json

custom-tab-bar/index.wxss

custom-tab-bar/index.wxml

我们创建根目录下custom-tab-bar文件,点击生成component(将其作为组件自定义,这与页面导航自定义是一样原理的)

效果如图:

图片.png

此时系统自动识别该文件

接下来使用vant-weapp的组件库,对vant-weapp组件不了解的,

我们引入vant的tabBar标签组件

vant-weapp官方文档引入tabBar标签

图片.png

复制代码,放入index.json文件中的components节点中(局部引入)

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

按照官方文档,配置js文件的数据和方法,即可基本使用

图片.png

效果:

图片.png

接下来我们自定义图标,见官方文档:

图片.png

还记得slot的用法吗,插槽

在对应的tabbar-item项中直接放入图片,通过插槽slot指定图片是选中状态还是未选中状态

在vant的tabbar组件源代码其实是有对于两个插槽接受图片的,如下:

<slot name="icon"></slot>
<slot name="icon-active"></slot>
  • 源代码
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{{ icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    自定义
  </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
Page({
  data: {
    active: 0,
    icon: {
      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
      active: 'https://img.yzcdn.cn/vant/user-active.png',
    },
  },
  onChange(event) {
    this.setData({ active: event.detail });
  },
});

我们往image标签的属性src放置我们图标即可

没有好的图标素材见:图标库素材

效果:

图片.png

其中info是对改组件的传参,可以动态设定,不需要删掉即可

接下来我们循环生成图标,将我们第一个实例配置tabbarlist节点复制到index.jsdata中,组件通过wx:for循环list数组,生成对应图标,

  • 效果:
    图片.png图片样式可以自己定义style

设置info的值可以在图标上显示 ,但是我们发现改图标会超出范围,如下图

图片.png

原因很简单,是vant组件样式下有一个margin-bottom导致,我们可以通过设置vant组件的css全局变量设置

在通过外部样式修改组件的内部样式(样式隔离)之前,我们需要设定样式隔离

“styleIsolation”: "shared"
  • 在父组件配置,修改配置
    图片.png图片.png

在index.js中

Component({
  "options":{
  "styleIsolation": "shared"
  }

二、 动态显示info消息

  • 如果未定义info则为假,不显示,如果为0也为假,也不显示符合我们的开发需求
    图片.png
  • 使用mobx全局共享

思路:mobx绑定全局控制info

mobx官方文档

在index.js如下配置

// custom-tab-bar/index.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' //引入创建绑定实例
import { store } from '../store/store' // 引入仓库store
Component({
  behaviors:[storeBindingsBehavior],
  storeBindingsBehavior:[{
    store,
    fields:{
    sum: 'sum'
    },
    actions:{
    }

绑定sum的值到info

在一开始我是不知道如何同步sum和info的值,甚至想用 组件通信的知识解决(大家都知道组件通信很麻烦),

但是忘了组件有一个非常的方法:数据监听器 (behavior)

图片.png

a

代码解释:

在以往赋值时是不需要对赋值对象加上双引号“”的,

但是 list需要索引到 list[1] 由于模板语法需要双引号的形式 'list[1].info' : a

  • 效果如下68.gif

三、 页面切换效果

通过改组件自带的 事件绑定函数 onChange解决 (通过其active的变化使用编程式导航(文章介绍更新中)索引listurl路径切换页面

图片.png

代码部分

methods: {
  onChange(event) {
    // event.detail 的值为当前选中项的索引 
    this.setData({
      active: event.detail
    });
    wx.switchTab({
      url: String(this.data.list[event.detail].pagePath), // String转换为字符串 或者加 "" 隐式转换, - 0 则隐式转换为整数
    })
  },

但是在设定好之后会出现如下情况,页面有正常跳转,但是图标却出了bug,其中active在组件中是控制跳转到哪一个页面的,为0跳转到一个,为1跳转到第二个 ,在调试中,我发现active的值没有毛病,按道理不应该出bug,所以笔者认为应该是页面跳转时候,组件中的active会变化,而js文件的active没问题

69.gif

解决方法:

将active 存贮到store 进行全局共享

添加字段和方法图片.png

图片.png

在index.js文件中 修改onChnage函数

methods: {
  onChange(event) {
    // event.detail 的值为当前选中项的索引 
    this.updataActive(event.detail)
    wx.switchTab({
      url: String(this.data.list[event.detail].pagePath), // String转换为字符串 或者加 "" 隐式转换, - 0 则隐式转换为int
    })
  },

效果:

70.gif

实现成功

修改标签颜色值

官方文档找到API

图片.png

  • 效果图:图片.png

四、 配置总结

其实我们都需要配置好tabBar的,不管是不是自定义都需要在app.jsontarBar节点配置,我们可以自定义配置文件可以tarBar节点配置好完整属性,查看效果在细调,然后我们在创建自定义文件,编写代码,然后将我们刚刚配置的list节点放入 custom-tab-barindex.jsdata中在index.wxml通过循环遍历改list数据实现效果,这种流程有几个好处

  1. 在版本不兼容时等一些特殊情况,还是能基本显示效果,
  2. 不用同时两处配置,在app.json节点配置list复制到index.jsdata,通过页面循环即可实现,且所循环数据都能很好满足数据需求,如图像链接,文本等

🤞到这里,如果还有什么疑问🤞
🎩欢迎私信博主问题哦,博主会尽自己能力为你解答疑惑的!🎩
   🥳如果对你有帮助,你的赞是对博主最大的支持!!🥳


相关文章
|
1月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
407 1
|
1月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
60 0
微信小程序:自定义关注公众号组件样式
|
1月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
19 2
|
3月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
131 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
485 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
538 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
78 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
191 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
62 5