微信小程序自定义tabBar的步骤记录
作者：帅气的铅笔 发布时间：2024-07-17 17:32:35
标签：微信小程序,自定义,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
真机测试可用，使用也非常的简单。
来源：https://blog.csdn.net/qq_28779083/article/details/91377265
0
投稿猜你喜欢
- 可输入的下拉列表框（select），这个不同于网页上常见的下拉列表框，那个是只能选择不能输入的，而这个是可以自己输入文字的。例如：我们最常见
认识模块对于模块，在前面的一些举例中，已经涉及到了，比如曾经有过：import random (获取随机数模块)。为了能够对模块有一个清晰的- 一、ADO.Net数据库连接字符串1、OdbcConnection（System.Data.Odbc）(1)SQL Sever标准安全:&q
- 在Python中如何实现单例模式？这可以说是一个经典的Python面试题了。这回我们讲讲实现Python中实现单例模式的n种方式，和它的原理
- 在做Django项目的过程中, 无法进入pycharm提供的Run manager.py Task交互环境出现这种问题是因为Pycharm无
- 今天在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下1.箭头函数中的this箭头函数内部
- datetime 时间包认识 datetime 时间包：date：日期；time：时间；所以 datetime 就是 日期与时间的结合体使用
- 1 用法说明str.format() 方法通过字符串中的花括号 {} 来识别替换字段从而完成字符串的格式化。1.1 写法简单字段名有三种写法
- 一、CourseBuilder可以做什么？CourseBuilder 强大在哪里，功用是什么？这是我们
- 概述map是基于key-value键值对的无序的集合Go语言中的map是引用类型必须初始化才能使用。语法声明和初始化配合make使用,否则是
- 1. 原因（1）js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。（2）刷新页面，以前申请的内存被释放，重新加载脚本代码
- 高考在即，笔者想为孩子以后能够快乐学习数学、学习编程找到一个比较合适的项目，经过一番比较发现github上的万星项目manim(https:
- 本文实例讲述了RSA实现JS前端加密与PHP后端解密功能。分享给大家供大家参考，具体如下：web前端，用户注册与登录，不能直接以明文形式提交
- MySQL是Web世界中使用最广泛的数据库服务器。SQLite的特点是轻量级、可嵌入，但不能承受高并发访问，适合桌面和移动应用。而MySQL
- 由于计算机软件的非法复制，通信的泄密、数据安全受到威胁。一般为了安全，会要求将数据库名称、密码等信息进行加密。所以加密在开发过程中是经常使用
- #_*_coding:utf_8_import sysimport osclass Graph(): d
- isnull在数据库查询中的应用，特别是再语句连接的时候需要用到 比如连接时候，某个字段没有值但是又要左连接到其他表上 就会显示空， isn
- 本文实例讲述了python监控网站运行异常并发送邮件的方法。分享给大家供大家参考。具体如下：这是一个简单的python开发的监控程序，当指定
- View in Browser功能不生效问题安装玩view in browser插件后，在文档中点击邮件的view in browser 不
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作 ⚠️ 对象测量概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大.
