位置: 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领域迎来新风口(周末闲暇时光是什么意思)

  • 红米10xpro有无线充电吗(红米10x有无线充电吗?)

    红米10xpro有无线充电吗(红米10x有无线充电吗?)

  • 抖音有的视频不能保存是怎么回事(抖音有的视频不能保存到相册)

    抖音有的视频不能保存是怎么回事(抖音有的视频不能保存到相册)

  • 华为折叠屏手机上市时间(华为折叠屏手机p50pocket怎么样)

    华为折叠屏手机上市时间(华为折叠屏手机p50pocket怎么样)

  • 麒麟990比麒麟980提升多少(麒麟990比麒麟970提升多少)

    麒麟990比麒麟980提升多少(麒麟990比麒麟970提升多少)

  • 华为荣耀20pro支持5g吗(华为荣耀20pro支持多少快充)

    华为荣耀20pro支持5g吗(华为荣耀20pro支持多少快充)

  • 钉钉分屏老师知道吗(钉钉分屏老师看得见吗)

    钉钉分屏老师知道吗(钉钉分屏老师看得见吗)

  • 手机qq视频通话怎么调静音

    手机qq视频通话怎么调静音

  • 苹果bar是什么意思(苹果bar是什么时候开始有的)

    苹果bar是什么意思(苹果bar是什么时候开始有的)

  • 怎么提高视频画质(怎么提高视频画质剪映)

    怎么提高视频画质(怎么提高视频画质剪映)

  • 手机号注销后还能查到个人信息吗(手机号注销后还能查出身份吗)

    手机号注销后还能查到个人信息吗(手机号注销后还能查出身份吗)

  • amd2600能不能装win7(amd2600e)

    amd2600能不能装win7(amd2600e)

  • 淘宝的等级怎么划分的(淘宝的等级怎么升级)

    淘宝的等级怎么划分的(淘宝的等级怎么升级)

  • 作业帮可以分屏吗(作业帮分屏老师能看见吗)

    作业帮可以分屏吗(作业帮分屏老师能看见吗)

  • 微型机主机是指什么(微型电脑主机)

    微型机主机是指什么(微型电脑主机)

  • 退出登录和关闭微信有什么区别(退出登录和关闭qq)

    退出登录和关闭微信有什么区别(退出登录和关闭qq)

  • ipad2019支持pencil二代吗(ipad2019支持pencil磁吸充电吗)

    ipad2019支持pencil二代吗(ipad2019支持pencil磁吸充电吗)

  • 微信开静音对方知道吗(微信开静音对方能知道吗)

    微信开静音对方知道吗(微信开静音对方能知道吗)

  • b站答题在哪(b站答题的答案是什么)

    b站答题在哪(b站答题的答案是什么)

  • ibm是什么牌子的电脑(ibm是哪个国家的品牌)

    ibm是什么牌子的电脑(ibm是哪个国家的品牌)

  • 快手直播有哪些规则需要注意(快手直播有哪些软件)

    快手直播有哪些规则需要注意(快手直播有哪些软件)

  • 如何将音乐下载到u盘(如何将音乐下载到内存卡)

    如何将音乐下载到u盘(如何将音乐下载到内存卡)

  • 触宝电话怎么不能免费打了(触宝电话怎么不响了)

    触宝电话怎么不能免费打了(触宝电话怎么不响了)

  • 手机声卡怎么安装步骤(手机声卡怎么安装到电脑上)

    手机声卡怎么安装步骤(手机声卡怎么安装到电脑上)

  • 苹果购买的app怎么退订(苹果购买的app怎么付款)

    苹果购买的app怎么退订(苹果购买的app怎么付款)

  • 学习强国为什么收藏不了(强国每天满分,为什么有人会多几分)

    学习强国为什么收藏不了(强国每天满分,为什么有人会多几分)

  • 微信百万保障扣钱吗(微信百万保障扣费吗)

    微信百万保障扣钱吗(微信百万保障扣费吗)

  • 优酷hdr画质是什么(优酷hdr和1080p哪个清晰)

    优酷hdr画质是什么(优酷hdr和1080p哪个清晰)

  • Mac键盘进水了怎么办?苹果电脑键盘进水后维修办法介绍(mac电脑键盘进水,键盘不可以用了)

    Mac键盘进水了怎么办?苹果电脑键盘进水后维修办法介绍(mac电脑键盘进水,键盘不可以用了)

  • 上年度已交房产税减免如何做账务处理
  • 购买土地使用权契税的会计分录
  • 税务问答网站
  • 什么是印花税的税目
  • 计提存货跌价准备的存货出售
  • 个人社保信息变更
  • 核定征收的收入总额包括营业外收入吗
  • 非独生子女赡养老人专项附加扣除的标准
  • 个人独资企业500万以下
  • 待报解预算收入付款怎么做账
  • 贷款减值准备如何计提
  • 跨区域经营企业
  • 商业企业月末结转成本
  • 供应商给的折扣比发票少怎么做账
  • 增值税进项销项每个月需要结转吗
  • 外出参加会议费用怎么算
  • 固定资产常用计算公式
  • 分票报关合票出提单怎么清关
  • 办理完税务手续是否还需要报税?
  • 固定资产怎么进入生产成本
  • 六税两费减半征收政策2022
  • 公司不给发公司
  • 专家评审费需要多少钱
  • 固定资产可以一次性计入成本费用吗
  • 事业单位购买固定资产如何记账
  • 贷款利息收到发票怎么办
  • 资产负债一并转让增值税
  • 免税农产品抵扣政策
  • 出口退税转内销还是转免税好
  • win10我的电脑图标不见了怎么恢复原状
  • 农产品成本法计算抵扣
  • mac怎么airdrop给ipad
  • 简易征收税务处理
  • opencart 二次开发
  • i9是多少纳米的芯片
  • 回迁房?
  • laravel搭建
  • php统计目录中文怎么写
  • 专利权出资会计科目
  • 免税需要什么条件
  • codeignitor
  • php修改图片尺寸
  • 本月增加的无形资产数量
  • 微信多开使用方法
  • 并发操作的定义
  • 进入微信小程序
  • 适用于windows7的更新程序会更新到windows10吗
  • 合并报表为什么要抵消子公司所有者权益
  • mysql有几种基本数据类型
  • 冲以前年度管理费用
  • 进项税计税依据
  • 非货币性资产交换以公允价值为基础进行计量
  • 红字发票与作废发票验旧
  • 一万元,两分的利息,一年利息是多少
  • 营改增后企业所得税是国税还是地税
  • 租金收入怎样缴纳个税
  • 计提本月应交增值税会计科目
  • 进出车间管理规定适用
  • 新公司成立的文案
  • 短期借款财务处理
  • 销项负数发票给谁
  • 企业税负是否包含增值税
  • 进料料件复出可以给第三方吗
  • 出口退税登记的内容
  • 库存商品与存货总额之比
  • 资产负债表上应交税费是什么意思
  • 故意销毁会计凭证、会计账簿罪
  • 指定为fvtpl
  • iso镜像怎么装
  • win10 rs3
  • linux批量处理
  • Setver、Share、Subst命令的使用方法
  • 分享两句话
  • CSS List Grid Layout 图片垂直居中
  • unity arkit
  • javascript 对象的this指向
  • 电子税务局企业账号是税号吗
  • 居间服务费税收优惠政策
  • 医保电子凭证怎么激活
  • 去银行签贷款合同后多久办过户
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设