微信小程序自定义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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了JS实现多物体运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了JS严格模式原理与用法,结合实例形式分析了JS严格模式基本概念、原理、用法及相关操作注意事项,需要的朋友可以参考下2020-04-04
JavaScript中数组的sort()方法主要用于对数组的元素进行排序。其中，sort()方法有一个可选参数。接下来通过本文给大家介绍数组Array.sort()排序的方法，需要的朋友参考下2017-03-03
replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正则表达式对象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。为了帮助大家更好的理解，下面举个简单例子说明一下2007-12-12
由于网络、浏览器问题、缓存等原因执行js的时候会抛出异常接下来分享一个想法，基本上涉及到两步：收集和使用，感兴趣的你可以参考下哈，希望对你有所帮助2013-03-03
把List集合转成json格式传到界面上，这样js里面操作也简单，具体的解决方法如下，大家可以参考学习下2014-04-04
这篇文章主要为大家详细介绍了JavaScript实现九宫格移动拼图游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了微信小程序画布显示图片绘制矩形选区效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-05-05
javascript createElement()创建input不能设置name属性的解决方法
今天在使用document.createElement()动态创建input时，发现不能为其name赋值，以下是测试代码。2009-10-10
这篇文章主要介绍了Mint-UI时间组件起始时间问题的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
最新评论