位置: IT常识 - 正文

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

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

推荐整理分享【微信小程序开发】自定义tabBar案例(定制消息99+小红心)(微信小程序开发公司),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序开发费用一览表,微信小程序开店的步骤,微信小程序开店的步骤,微信小程序开店收费吗,微信小程序开发平台,微信小程序开发平台,微信小程序开发公司,微信小程序开发公司,内容如对您有帮助,希望把文章链接给更多的朋友!

🤵‍♂️ 个人主页: @计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。

🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推|

还没有账户的小伙伴 速速点击链接登录注册把!🎉🎉

该文章收录专栏 ✨ 2022微信小程序京东商城实战 ✨

文章目录一、前提概要二、 动态显示info消息三、 页面切换效果四、 配置总结一、前提概要

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

需要的知识点如下:

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

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

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

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

官方文档如是说

和默认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(将其作为组件自定义,这与页面导航自定义是一样原理的)

效果如图: 此时系统自动识别该文件

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

我们引入vant的tabBar标签组件

vant-weapp官方文档引入tabBar标签 复制代码,放入index.json文件中的components节点中(局部引入)

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

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

效果:

接下来我们自定义图标,见官方文档: 还记得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://www.yuucn.com/wp-content/uploads/2023/04/1682244905-e2610443de73c33.png', active: 'https://www.yuucn.com/wp-content/uploads/2023/04/1682244911-e2610443de73c33.png', }, }, onChange(event) { this.setData({ active: event.detail }); },});【微信小程序开发】自定义tabBar案例(定制消息99+小红心)(微信小程序开发公司)

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

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

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

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

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

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

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

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

“styleIsolation”: "shared"在父组件配置,修改配置

在index.js中

Component({"options":{"styleIsolation": "shared"}二、 动态显示info消息

如果未定义info则为假,不显示,如果为0也为假,也不显示符合我们的开发需求

使用mobx全局共享

思路:mobx绑定全局控制info

mobx官方文档

在index.js如下配置

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

绑定sum的值到info

在一开始我是不知道如何同步sum和info的值,甚至想用 组件通信的知识解决(大家都知道组件通信很麻烦), 但是忘了组件有一个非常的方法:数据监听器 (behavior) a 代码解释: 在以往赋值时是不需要对赋值对象加上双引号“”的, 但是 list需要索引到 list[1] 由于模板语法需要双引号的形式 'list[1].info' : a

效果如下三、 页面切换效果

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

代码部分

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没问题

解决方法: 将active 存贮到store 进行全局共享

添加字段和方法

在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})},

效果: 实现成功

修改标签颜色值 官方文档找到API

效果图: 四、 配置总结

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

在版本不兼容时等一些特殊情况,还是能基本显示效果,不用同时两处配置,在app.json节点配置list复制到index.js的data,通过页面循环即可实现,且所循环数据都能很好满足数据需求,如图像链接,文本等 🤞到这里,如果还有什么疑问🤞🎩欢迎私信博主问题哦,博主会尽自己能力为你解答疑惑的!🎩 🥳如果对你有帮助,你的赞是对博主最大的支持!!🥳
本文链接地址:https://www.jiuchutong.com/zhishi/299867.html 转载请保留说明!

上一篇:Day 1 认识软件测试——(软件测试定义、目的、原则)(如何认识软件测试)

下一篇:【周末闲谈】畅想AR,AR领域迎来新风口(周末闲暇时光是什么意思)

  • vivox70pro地震警报怎么开(vivos7手机地震提醒在哪里)

    vivox70pro地震警报怎么开(vivos7手机地震提醒在哪里)

  • 微信视频可以静音吗(微信视频可以静音发送吗)

    微信视频可以静音吗(微信视频可以静音发送吗)

  • 微信怎么转换成深色模式(微信怎么转换成短信发送)

    微信怎么转换成深色模式(微信怎么转换成短信发送)

  • ios已下载无法安装(iphone下载完成无法安装)

    ios已下载无法安装(iphone下载完成无法安装)

  • 闲鱼鱼塘怎么突破500人(闲鱼渔塘)

    闲鱼鱼塘怎么突破500人(闲鱼渔塘)

  • iphone11屏幕有白点(iphone11屏幕出现白色竖条纹)

    iphone11屏幕有白点(iphone11屏幕出现白色竖条纹)

  • 幻灯片的版式是由什么组成的(幻灯片的版式是由 ( )组成的A文本框B表格C图标D占位符)

    幻灯片的版式是由什么组成的(幻灯片的版式是由 ( )组成的A文本框B表格C图标D占位符)

  • 数据传输的可靠性指标是(数据传输的可靠性是由哪一层)

    数据传输的可靠性指标是(数据传输的可靠性是由哪一层)

  • 腾讯视频会员能几个人同时观看(腾讯视频会员能投屏到电视上吗)

    腾讯视频会员能几个人同时观看(腾讯视频会员能投屏到电视上吗)

  • mac电池循环次数(mac电池循环次数26次是使用了多久)

    mac电池循环次数(mac电池循环次数26次是使用了多久)

  • 抖音怎么找不到随拍功能(抖音怎么找不到转场特效了)

    抖音怎么找不到随拍功能(抖音怎么找不到转场特效了)

  • 淘宝聊天的文件在哪里(淘宝聊天的文件在哪里找)

    淘宝聊天的文件在哪里(淘宝聊天的文件在哪里找)

  • 存储器有哪两种(存储器有哪两种存储方式)

    存储器有哪两种(存储器有哪两种存储方式)

  • qq大王超级会员有什么用

    qq大王超级会员有什么用

  • flaal10是什么型号(FLAAL10是什么型号)

    flaal10是什么型号(FLAAL10是什么型号)

  • 淘宝钉钉是什么(淘宝钉钉是什么意思)

    淘宝钉钉是什么(淘宝钉钉是什么意思)

  • 华为nova5从哪里插耳机(华为nova5从哪里看APP是高耗电)

    华为nova5从哪里插耳机(华为nova5从哪里看APP是高耗电)

  • 淘宝省钱专区为什么有的人没有(陶宝省钱专区不见了)

    淘宝省钱专区为什么有的人没有(陶宝省钱专区不见了)

  • 突然断电后电脑主机无法启动(突然断电后电脑显示屏不亮了)

    突然断电后电脑主机无法启动(突然断电后电脑显示屏不亮了)

  • 优酷怎么关掉自动续费(优酷怎么关掉自动更新系统)

    优酷怎么关掉自动续费(优酷怎么关掉自动更新系统)

  • 鸿蒙系统怎么升级mate30 华为Mate30升级鸿蒙系统步骤教程(鸿蒙系统怎么升级3.0)

    鸿蒙系统怎么升级mate30 华为Mate30升级鸿蒙系统步骤教程(鸿蒙系统怎么升级3.0)

  • 笔记本电脑保养维护(笔记本电脑保养常识电池)

    笔记本电脑保养维护(笔记本电脑保养常识电池)

  • IntelMEM.exe是什么进程 IntelMEM进程的详细信息查询(intel me有什么用)

    IntelMEM.exe是什么进程 IntelMEM进程的详细信息查询(intel me有什么用)

  • sosreport命令  收集并打包诊断和支持数据(sosreport命令收集详细信息)

    sosreport命令 收集并打包诊断和支持数据(sosreport命令收集详细信息)

  • 出口货物退税是指
  • 税控盘扣税缴税分录怎么写
  • 自己企业生产的物料入库单由谁填写
  • 租赁合同印花税率
  • 怎么查对方一个月去了什么地方
  • 公司注销固定资产怎么处理税怎么交
  • 公司有食品流通证能卖保健品吗
  • 预交增值税设备租赁是否可抵扣
  • 房屋置换以房换房政策2019
  • 小规模纳税人每个月需要报什么税
  • 收回已确认的坏账的应收账款
  • 半成品原材料报废会计处理怎么做?
  • 当期未开票过收入,以后开票怎么做会计分录
  • 企业安装监控费用怎么做账
  • 电子增值普通发票经营范围呢免费吗
  • 小规模纳税人未开票收入填在哪里
  • 企业向个人赠送车辆
  • 建筑业外出经营管理办法
  • 城镇土地使用税减免税政策
  • 开票资料电话可以查到吗
  • 材料费用定额是什么意思
  • 劳务分包简易计税可以抵扣吗
  • 专用发票离线限额是什么意思
  • 劳务公司包工包料的法律法规
  • 集团公司收取管理费是否可以税前列支
  • 公对公转账不开票可以吗
  • 什么叫冲减进项税额
  • 小规模纳税人的增值税怎么算
  • win10老是错误
  • 公司制作一个app要多少钱
  • 商品盘点短缺和溢余的核算
  • msoxmled.exe是什么软件
  • 木卫一距离木星多远
  • thinkphp批量修改
  • opencv调用yolov8
  • 存货采购成本有余额吗
  • 小微企业所得税优惠政策2023
  • 什么时候免交教育费
  • python的socket
  • js变量作用范围
  • 运费计入什么会计分录
  • 企业筹建期间
  • 工会经费上缴流程
  • 房屋租赁如何入账
  • 企业净利率多少算高
  • 国家税务总局纳税服务规范
  • sql死锁的简单例子
  • 销售返利的会计分录 东奥
  • 合同印花税怎么做会计分录
  • 现金发放工资有什么风险
  • 建设工程招投标示范文本
  • 公司办公室装修装修
  • 如何理解事业单位处罚暂行条例中第十八条的兼职规定
  • 个体工商户纳税申抿
  • 收到保险公司保险费会计分录
  • 旅客运输服务客体是什么
  • 会计凭证装订的注意事项
  • 企业清算的顺序
  • winxp系统桌面图片
  • winxp系统怎么设置默认账户登入
  • linux find命令详解xargs
  • liunx系统常用命令
  • 超小平板电脑
  • hc off line什么意思
  • 如何删除双系统中的linux系统
  • win8休眠如何唤醒
  • 删除账户win10
  • elementtree修改节点属性
  • python接入微信
  • python定时利用QQ邮件发送天气预报的实例
  • shell 算数计算
  • Node.js中的全局对象有
  • javascript 函数
  • jquery判断checkbox是否选中及改变checkbox状态的实现方法
  • 安卓 存储权限 访问的地方是哪里
  • 如何打印个人缴税记录
  • 农业方面有哪些专业
  • 综合所得申报表在哪里
  • 贵州铜仁苗族自治区
  • 如何下载电子国税app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设