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

这篇具有很好参考价值的文章主要介绍了【微信小程序开发】自定义tabBar案例(定制消息99+小红心)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

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

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

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

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

一、前提概要

效果:实现一个自定义tabBar,使消息tabBar能够显示消息数量,并通过全局共享的方式,控制消息数量 微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架


需要的知识点如下:

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

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

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

注意:在配置自定义tabBar时,app.json中节点list不能删除,因为仍需要指定tabBar页面,这是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(将其作为组件自定义,这与页面导航自定义是一样原理的)

效果如图:
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架
此时系统自动识别该文件

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

我们引入vant的tabBar标签组件

vant-weapp官方文档引入tabBar标签
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架
复制代码,放入index.json文件中的components节点中(局部引入)

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

按照官方文档,配置js文件的数据和方法,即可基本使用
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

效果:
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

接下来我们自定义图标,见官方文档:
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架
还记得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放置我们图标即可

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

效果:
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架
其中info是对改组件的传参,可以动态设定,不需要删掉即可

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

  • 效果:
    微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架图片样式可以自己定义style

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

微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

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

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

“styleIsolation”: "shared"
  • 在父组件配置,修改配置
    微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架
    微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

在index.js中

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

二、 动态显示info消息

  • 如果未定义info则为假,不显示,如果为0也为假,也不显示符合我们的开发需求
    微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

  • 使用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)
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架
a
代码解释:
在以往赋值时是不需要对赋值对象加上双引号“”的,
但是 list需要索引到 list[1] 由于模板语法需要双引号的形式 'list[1].info' : a

  • 效果如下微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

三、 页面切换效果

通过改组件自带的 事件绑定函数 onChange解决 (通过其active的变化使用编程式导航(文章介绍更新中)索引listurl路径切换页面
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

代码部分

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

微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

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

添加字段和方法微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

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

效果:
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架
实现成功

修改标签颜色值
官方文档找到API
微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

  • 效果图:
    微信小程序tabbar图标素材,小程序开发从入门到精通(项目级实战),微信小程序,小程序,微信,前端,前端框架

四、 配置总结

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

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

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

到了这里,关于【微信小程序开发】自定义tabBar案例(定制消息99+小红心)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发学习笔记《17》uni-app框架-tabBar

    博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 运行如下的命令,基于master分支在本地创建tabBar子分支,用来开发和tabBar相关的功能: 在 pages目录中,创建首页(home)、分类(cate)、购物车(cart)、我的(my)这4个

    2024年02月20日
    浏览(70)
  • HarmonyOS NEXT应用开发案例——自定义TabBar

    介绍 本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示,并有一小段动画效果。 效果图预览 使用说明 : 依次点击tabBar页面,除了社区图标之外,其它图标往上移动一小段距离。 实现思路 场景1:TabBar中间页面实现有一圈圆

    2024年03月14日
    浏览(49)
  • 微信小程序自定义tabBar,前端开发技能

    首页 分类 留言 我的 /components/index-tabbar/index.js Component({ properties: { active: { type: String, value: ‘index’ }, }, methods: { onChange(event) { wx.redirectTo({ url: /pages/${event.detail}/index , }) } } }) 模拟的 tabbar 页面写法如下: /pages/home/index.json { “usingComponents”: { “index-tabbar”: “/components/index-ta

    2024年04月22日
    浏览(37)
  • 微信小程序开发 案例二 调查问卷

    第一步:主界面代码 **第二步:css样式修改 第三步:安装环境 先安装node.js node.js官网 进入官网安装稳定版本 安装完毕后在同一级创建一个空文件夹 最好都用英文文件夹名 打开新文件夹 打开命令提示符cmd 地址找到新建的文件夹 输入 npm init -y 再输入 npm install express --save 用

    2024年02月09日
    浏览(45)
  • 微信小程序开发教学系列(12)- 实战项目案例

    本章将通过一个简单的实战项目案例来帮助读者巩固之前学习到的知识。我们将搭建一个名为“ToDoList”的微信小程序,实现一个简单的任务清单功能。 ToDoList是一个用于记录和管理任务的小程序。用户可以添加、编辑、完成和删除任务,以及查看任务清单。 功能需求 显示任

    2024年02月11日
    浏览(54)
  • 【微信小程序开发】学习小程序的模块化开发(自定义组件和分包加载)

    模块化开发是一种将复杂的应用程序分解为一系列独立的模块,每个模块负责完成特定的功能的开发方式。模块化开发可以提高代码的可维护性和可复用性,使开发过程更加高效和灵活。 模块化开发在软件开发领域中被广泛应用,其重要性和优势不言而喻。 首先,模块化开

    2024年02月05日
    浏览(59)
  • 上门按摩小程序开发|同城预约上门小程序定制

    上门按摩小程序对实体按摩商家来说是非常适合的。下面是对上门按摩小程序适合实体按摩商家开发的简单介绍: 扩展服务范围:上门按摩小程序可以让实体按摩商家将服务范围扩展到用户的家中或办公场所。用户可以通过小程序预约上门按摩服务,无需前往实体店面,提供

    2024年02月12日
    浏览(42)
  • 小程序定制开发流程

    小程序定制开发是指根据客户的具体需求和业务场景,为其量身定制开发小程序的过程。以下是小程序定制开发的一般流程: 需求分析:与客户沟通,了解其业务需求、目标用户、功能要求等,明确小程序的定位和功能。 设计规划:根据需求分析的结果,进行小程序的界面

    2024年01月21日
    浏览(47)
  • 微信小程序开发入门与实战 ⑩⑤(定义Data数据及监听器)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 专栏连接🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀 👉 微信小程序 (🔥) 组件模板渲染的私有数

    2024年02月09日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包