微信小程序自定义tabBar的步骤记录
更新时间：2021年08月05日 11:52:07 作者：帅气的铅笔
微信小程序开发越来越多样化,各种丰富的设计及体验,自定义tabBar也经常使用,下面这篇文章主要给大家介绍了关于微信小程序如何自定义tabBar的相关资料,需要的朋友可以参考下
1、前言
很多时候，小程序自带的tabBar不能够满足项目需求，这个时候就需要我们自定义tabBar了。但是在网上找了很久，基本都是存在切换时闪烁的问题。幸运的是从基础库2.5.0开始，可以官方使用自定义tabBar了。
2、自定义tabBar样式
如下图所示，我们需要一个展示“首页”、“我的”，和一个可以点击跳转到发布的tabBar。这种样式，原生的就无法满足需求了，只能自定义tabBar了。
3、引入custom-tab-bar及相关配置
3.1、如下图所示，将custom-tab-bar【下载】导入项目根目录，
3.2、在app.json中配置好切换的tabbar，并设置"custom": true，然后将基础库设置成2.5.0
3.3、使用自定义TabBar，在切换的TabBar界面的onShow中添加如下代码。如首页中设置 selected: 0，我的中设置 selected: 2。因为 selected: 1 是特殊跳转，点击加号图标时，不再是切换tabbar，而是直接跳转发布界面了。
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
console.log('设置选中项 0')
this.getTabBar().setData({
selected: 0
})
}
},
4、完整Demo
真机测试可用，使用也非常的简单。【完整Demo下载地址】
总结
到此这篇关于微信小程序如何自定义tabBar的文章就介绍到这了,更多相关小程序自定义tabBar内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
WebSocket 是一种在 Web 应用程序中实现实时、双向通信的协议,在本文中,我们将深入介绍 WebSocket 的原理、用法以及一些实际应用场景,x需要的可以参考下2023-11-11
这篇文章主要为大家详细介绍了JavaScript实现广告弹窗效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
最近有个需求是将jsp页面上的某一段代码块格式化成类似CSDN的代码块的样式，而且很多平台都使用了这样的功能，下面就为大家简单分享一下2021-02-02
此控件以xml为数据源，可以进行输入的多属性自动适配2009-07-07
在阅读一些框架的源码时发现了new static(),和new self(),甚是不解,后来查阅资料,才了解了,所以下面这篇文章主要给大家介绍了关于php类中static与self的使用区别的相关资料,需要的朋友可以参考下2021-06-06
函数副作用 指当调用函数时，除了返回函数值之外，还对主调用函数产生附加的影响。例如修改全局变量（函数外的变量）或修改参数。2011-08-08
这篇文章主要为大家详介绍了如何让JavaScript代码不可断点，文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，感兴趣的可以了解一下2022-08-08
这篇文章主要介绍了JavaScript代码因逗号不规范导致IE不兼容的问题的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了JavaScript箭头函数中的this详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了微信公众号支付H5调用支付,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论