当前位置： 首页 > news >正文

小程序自定义tabbar，中间凸起

news 2026/2/7 14:53:36

微信小程序自带tabbar，但无法实现中间按钮凸起样式和功能，因此按照设计重新自定义一个tabbar

1、创建tabbar文件，与pages同级创建一个文件夹，custom-tab-bar,里面按照设计图将底部tabbar样式编写

<view class="tab-bar"><view class="tab-bar-border"></view><block wx:for="{{list}}" wx:key="index"><view wx:if="{{item.isSpecial}}" class="tab-bar-item" data-name="{{item.text}}" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial || false }}" data-index="{{index}}" bindtap="switchTab"><view class="special-image"><image class="special-image-pic" mode="widthFix" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image></view><view style="color: {{selected === index ? selectedColor : color}}" class="special-text tab-text">{{item.text}}</view></view><view wx:else class="tab-bar-item" data-name="{{item.text}}" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial }}" data-index="{{index}}" bindtap="switchTab"><image class="item-image" mode="widthFix" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image><view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view><view class="num" wx:if="{{item.text == '消息' && message_num != 0}}">{{message_num}}</view></view></block>
</view>

2、在app.js中添加点击事件

  /* 自定义底部按钮切换 */getCurrentTabbar(selected, that) {if (typeof that.getTabBar === 'function' &&that.getTabBar()) {if (wx.getStorageSync('openid')) {msg_unread().then(res => {that.getTabBar().setData({selected: selected,message_num: res.data.data})})} else {that.getTabBar().setData({selected: selected})}}},

3、在app.json中修改默认tabbar数据结构

  "tabBar": {"custom": true,"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/contact/index","text": "通讯录"},{"pagePath": "pages/release/index","text": "发布"},{"pagePath": "pages/news/index","text": "消息"},{"pagePath": "pages/personal/index","text": "我的"}]
},

4、在对应的页面中执行点击事件

  app.getCurrentTabbar(index,this);/* index:tabbar对应的index */

如需源码，请点击下载源码，或点击顶部下载按钮

相关文章：

小程序自定义tabbar，中间凸起

微信小程序自带tabbar&#xff0c;但无法实现中间按钮凸起样式和功能&#xff0c;因此按照设计重新自定义一个tabbar 1、创建tabbar文件&#xff0c;与pages同级创建一个文件夹&#xff0c;custom-tab-bar,里面按照设计图将底部tabbar样式编写 <view class"tab-bar&q…...

编程日记 2023/9/25 21:06:08

数据结构-顺序栈C++示例

栈(stack)是限定仅在表尾进行插入或删除操作的线性表。 对栈来说&#xff0c;表尾端称为栈顶(top)&#xff0c; 表头端称为栈底(bottom)&#xff0c;不含元素的空表称为空栈。 假设栈 S ( a 1 , a 2 , a 3 , ⋯ , a n ) S(a_1,a_2,a_3,\cdots,a_n) S(a1​,a2​,a3​,⋯,an​…...

编程日记 2023/9/25 21:05:07

若依cloud -【 100 ~ 103 】

100 分布式日志介绍 | RuoYi 分布式日志就相当于把日志存储在不同的设备上面。比如若依项目中有ruoyi-modules-file、ruoyi-modules-gen、ruoyi-modules-job、ruoyi-modules-system四个应用&#xff0c;每个应用都部署在单独的一台机器里边&#xff0c;应用对应的日志的也单独存…...

编程日记 2023/9/25 21:03:05

可转债实战与案例分析——成功的和失败的可转债投资案例、教训与经验分享

实战与案例分析——投资案例研究 股票量化程序化自动交易接口 一、成功的可转债投资案例 成功的可转债投资案例提供了有价值的经验教训&#xff0c;以下是一个典型的成功案例&#xff1a; 案例&#xff1a;投资者B的成功可转债投资 投资者B是一位懂得风险管理的投资者&#…...

编程日记 2023/9/25 21:00:01

@NotNull注解不生效，全局异常处理

1.引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId><version>3.1.2</version> </dependency> 2&#xff1a;实体类 实体类属性加上NotNull注解…...

编程日记 2023/9/25 20:57:59

【办公自动化】使用Python一键往Word文档的表格中填写数据（文末送书）

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

编程日记 2023/9/25 20:56:58

OpenHarmony应用核心技术理念与需求机遇简析

一、核心技术理念 图片来源&#xff1a;OpenHarmony官方网站 二、需求机遇简析 新的万物互联智能世界代表着新规则、新赛道、新切入点、新财富机会;各WEB网站、客户端( 苹果APP、安卓APK)、微信小程序等上的组织、企业、商户等;OpenHarmony既是一次机遇、同时又是一次大的挑战&…...

编程日记 2023/9/25 20:53:56

让Pegasus天马座开发板实现超声波测距

在完成《让Pegasus天马座开发板用上OLED屏》后&#xff0c;我觉得可以把超声波测距功能也在Pegasus天马座开发板上实现。于是在箱子里找到了&#xff0c;Grove - Ultrasonic Ranger 这一超声波测传感器。 官方地址: https://wiki.seeedstudio.com/Grove-Ultrasonic_Ranger 超声…...

编程日记 2023/9/25 20:51:52

C++11 多线程学习

C11学习 一、多线程 1、模板线程是以右值传递的 template <class Fn, class... Args> explicit thread(Fn&& fn, Args&&... args)则需要使用到std::ref和std::cref很好地解决了这个问题&#xff0c;std::ref 可以包装按引用传递的值。 std::cref 可以…...

编程日记 2023/9/25 20:48:49

数学公式测试

MVP变换 MVP变换用来描述视图变换的任务&#xff0c;即将虚拟世界中的三维物体映射&#xff08;变换&#xff09;到二维坐标中。 MVP变换分为三步&#xff1a; 模型变换(model tranformation)&#xff1a;将模型空间转换到世界空间&#xff08;找个好的地方&#xff0c;把所…...

编程日记 2023/9/25 20:47:48

机器学习——SVM（支持向量机）

0、前言&#xff1a; SVM应用&#xff1a;主要针对小样本数据进行学习、分类和回归&#xff08;预测&#xff09;&#xff0c;能解决神经网络不能解决的过学习问题&#xff0c;有很好的泛化能力。&#xff08;注意&#xff1a;SVM算法的数学原理涉及知识点比较多&#xff0c;所…...

编程日记 2023/9/25 20:46:48

【李沐深度学习笔记】基础优化方法

课程地址和说明 基础优化方法p2 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 基础优化方法 在讲具体的线性回归实现之前&#xff0c;要先讲一下基础的优化模型的方法 梯度下降 当模型没有显示解&#xff08…...

编程日记 2023/9/25 20:45:47

tmux 配置vim风格按键，支持gbk编码

vim修改~/.tmux.conf文件&#xff0c;没有则新增&#xff0c;添加如下内容。默认前缀更改为Ctrla。强烈建议更换Caps lock键位与Ctrl键位&#xff0c;用过的都说好&#xff0c;换过就回不来了。 unbind C-b set -g prefix C-a bind a send-prefixset -sg escape-time 1bind r …...

编程日记 2023/9/25 20:43:45

Python —— excel文件操作(超详细)

背景 很多公司还是用excel去管理测试用例的&#xff0c;所以为了减少重复繁琐的导出导出工作&#xff0c;学会如何用代码操作excel表格很实用~ 1、读取excel文件基本步骤 1、操作excel的一些库 1、xlrd&#xff1a;读取库&#xff0c;xlwt&#xff1a;写入&#xff0c;现在…...

编程日记 2023/9/25 20:41:44

什么是AI问答机器人？它的应用场景有哪些？

近年来&#xff0c;由于技术的进步和对个性化客户体验的需求不断增长&#xff0c;AI问答机器人也是获得了巨大的关注。AI问答机器人&#xff0c;也被称为AI聊天机器人&#xff0c;是一种旨在模拟人类对话并通过基于文本或语音的界面与用户交互的计算机程序。其能够自动执行各种…...

编程日记 2023/9/25 20:38:41

静态文件

静态文件 静态文件配置 - settings.py中 1&#xff0c;配置静态文件的访问路径【该配置默认存在】 通过哪个url地址找静态文件 STATIC URL‘/static/’ 说明 指定访问静态文件时是需要通过/static/xxx或http://127.0.0.1:8000/static/xxx [xxx表示具体的静态资源位置] 模…...

编程日记 2023/9/25 20:37:40

Centos7 自部署中间件开机启动，以及java应用开机启动方法

一、zookeeper cd /etc/rc.d/init.d/ touch zookeeper chmod x zookeeper vi zookeeper#以下为内容&#xff0c;自行修改 路径#!/bin/bash ##chkconfig:2345 10 90#description:service zookeeper #修改为自己的目录 export ZOO_LOG_DIR/data/apache-zookeeper-3.7.0/logs…...

编程日记 2023/9/25 20:34:36

密度估计公式

极大似然估计&#xff1a; y p ( x 1 , x 2 , x 3 , . . . , x n ) 1 2 π σ e − ( x 1 − μ ) 2 2 σ 2 1 2 π σ e − ( x 2 − μ ) 2 2 σ 2 . . . 1 2 π σ e − ( x n − μ ) 2 2 σ 2 y p(x_1,x_2,x_3,...,x_n) \frac{1}{\sqrt{2\pi} \sigma} e ^{-\frac{(x_1…...

编程日记 2023/9/25 20:32:34

2023 ICPC 网络赛 第一场（补题：F）

7题罚时879&#xff0c; 队排235&#xff0c;校排79。 除了I题dp没注意空间限制第一发没有用滚动数组MLE&#xff0c;以及G题启发式合并脑抽用set当容器T一发&#xff0c;以及K没注意是平方的期望白wa4发这些应当避免的失误外&#xff0c;基本满意。剩下的题基本都是当时写不出…...

编程日记 2023/9/25 20:31:33

MySQL慢查询优化、日志收集定位排查、慢查询sql分析

MySQL慢查询日志收集、定位&#xff0c;慢查询分析、排查。 一 MySQL慢查询定位 1. 确定是否已开启慢查询日志 查看慢查询日志是否已经被开启&#xff1a; SHOW VARIABLES LIKE slow_query_log; 如果返回值是OFF&#xff0c;你需要开启它。 2. 开启慢查询日志 你可以临时在运…...

编程日记 2023/9/25 20:30:32

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2026/2/3 12:56:31

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2026/2/1 1:28:58

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

编程新知 2026/2/1 11:11:34

理想汽车5月交付40856辆，同比增长16.7%

6月1日&#xff0c;理想汽车官方宣布&#xff0c;5月交付新车40856辆&#xff0c;同比增长16.7%。截至2025年5月31日&#xff0c;理想汽车历史累计交付量为1301531辆。 官方表示&#xff0c;理想L系列智能焕新版在5月正式发布&#xff0c;全系产品力有显著的提升&#xff0c;每…...

编程新知 2026/1/21 13:58:22

Qt/C++学习系列之列表使用记录

Qt/C学习系列之列表使用记录 前言列表的初始化界面初始化设置名称获取简单设置 单元格存储总结 前言 列表的使用主要基于QTableWidget控件&#xff0c;同步使用QTableWidgetItem进行单元格的设置&#xff0c;最后可以使用QAxObject进行单元格的数据读出将数据进行存储。接下来…...

编程新知 2026/1/27 5:03:39