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

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

news 2025/12/16 17:46:52

微信小程序自带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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/12/12 12:43:21

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/12/13 5:55:42

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/9/7 2:12:04

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/12/15 16:46:49

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

编程新知 2025/10/4 7:43:43