微信小程序自定义 底部 tabbar (中间凸起)

2023-10-30 14:40

本文主要是介绍微信小程序自定义 底部 tabbar (中间凸起),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、新建一个 tabbar 组件

1.新建文件

在与 pages 文件夹同级的地方新建 custom-tab-bar 文件夹,并新建 index.wxml 、index.wxss 、index.js 、index.json 四个文件夹
在这里插入图片描述

2.index.wxml

<view class="tab-bar"><view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"><view class="center_part"><view class="center_part_code" wx:if="{{index == 2}}"><image class=" center-has-noimg" src="{{centerImg}}"></image></view><image class=" center-has-image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}" wx:else></image></view><view style="color: {{selected === index ? selectedColor : color}}" class="cover-text">{{item.text}}</view><view class="number" wx-if="{{item.number != ''}}">{{item.number}}</view></view><view class="safeArea"></view>
</view>

3.index.wxss

.tab-bar {position: fixed;bottom: 0;left: 0;right: 0;height: 100rpx;display: flex;padding-bottom: env(safe-area-inset-bottom);z-index: 99;padding-top: 17rpx;background: url("https://ns51.eaia.cn/group1/M00/01/E4/wKgKymLgpdWARzR-AAANbZWJ5GM302.png")no-repeat;background-size: 100vw auto;
}.tab-bar-item {flex: 1;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;
}
.tab-bar-item cover-image {width: 27px;height: 27px;
}.tab-bar-item .cover-text {font-size: 10px;
}
.txt {color: #aaaaaa;
}
.fontWeight {font-weight: bold;
}
.bg_rec {background: #ffd324;width: 80rpx;min-height: auto;height: 20rpx;margin-top: -28rpx;vertical-align: text-bottom;border-radius: 0;z-index: -10;
}
.center_img {width: 100rpx;height: 100rpx;transform: translate(-50%);left: 50%;bottom: 0;
}
.center-has-noimg {width: 100%;height: 100%;
}
.center-has-image {width: 38rpx;height: 38rpx;
}
.center_part_code {padding: 15rpx;box-shadow: 0 0 0 #000;/* width: 100rpx;height: 100rpx; */position: absolute;top: -22px;z-index: 10;width: 90rpx;height: 90rpx;transform: translate(-50%);left: 50%;box-sizing: border-box;border-radius: 50%;background-color: #1296db;
}
.tab-bar-item:nth-child(3) > .cover-text {position: absolute;/* bottom: 4rpx; */bottom: calc(14rpx + env(safe-area-inset-bottom));
}
.number {position: absolute;font-size: 24rpx;min-width: 40rpx;min-height: 40rpx;display: flex;justify-content: center;align-items: center;color: #fff;padding: 4rpx;line-height: 24rpx;background-color: #fd6334;border-radius: 50%;transform: translate(26rpx, -40rpx);
}.safeArea {position: absolute;bottom: 0;left: 0;width: 100%;height: calc(6rpx + env(safe-area-inset-bottom));background-color: #fff;
}

4.index.js

注意路径!!!

Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#1296db",list: [{pagePath: "/pages/index/index",text: "首页",iconPath: "/static/images/tabbar/home.png",selectedIconPath: "/static/images/tabbar/home-active.png",number: "",},{pagePath: "/pages/goods/goods",text: "商品",iconPath: "/static/images/tabbar/goods.png",selectedIconPath: "/static/images/tabbar/goods-active.png",number: "",},{pagePath: "/pages/logs/logs",text: "",iconPath: "/static/images/tabbar/home.png",selectedIconPath: "/static/images/tabbar/home-active.png",number: "",},{pagePath: "/pages/notice/notice",text: "消息",iconPath: "/static/images/tabbar/test.png",selectedIconPath: "/static/images/tabbar/test-active.png",number: "",},{pagePath: "/pages/mine/mine",text: "我的",iconPath: "/static/images/tabbar/mine.png",selectedIconPath: "/static/images/tabbar/mine-active.png",number: "",},],// background: '../static/tabbar-bg.png',centerImg: "/static/images/tabbar/cart.png",},// attached() {//     如果中间凸起跳转 tabbar 页面,则把下面注释打开//     if (this.data.selected == 2) {//         this.setData({//             centerImg: '/static/icon/xinjian.png'//         })//     } else {//         this.setData({//             centerImg: '/static/icon/xinjian.png'//         })//     }//     显示数字提示//     let numi = 'list[3].number'//     this.setData({//         [numi]: 12//     })// },methods: {// 切换 tab 事件switchTab(e) {const data = e.currentTarget.dataset;const path = data.path;const index = data.index;// 跳转页面if (index != 2) {wx.switchTab({url: path,});} else {//中间凸起跳转非tabbar//注意,如果跳转tabbar页面则不进行判断wx.navigateTo({url: "/pages/cart/cart",});}},},
});

5.index.json

{"component": true,"usingComponents": {}
}

二、配置 tabbar

1.app.json

复制后会报错,把图片和页面路径改掉就好了!!!

{"tabBar": {"custom": true, // 一定要写这个!!!"color": "#000","selectedColor": "#1296DB","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/static/images/tabbar/home.png","selectedIconPath": "/static/images/tabbar/home-active.png"},{"pagePath": "pages/goods/goods","text": "商品","iconPath": "/static/images/tabbar/home.png","selectedIconPath": "/static/images/tabbar/home-active.png"},{"pagePath": "pages/logs/logs","text": "","iconPath": "/static/images/tabbar/home.png","selectedIconPath": "/static/images/tabbar/home-active.png"},{"pagePath": "pages/notice/notice","text": "消息","iconPath": "/static/images/tabbar/test.png","selectedIconPath": "/static/images/tabbar/test-active.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "/static/images/tabbar/mine.png","selectedIconPath": "/static/images/tabbar/mine-active.png"}]}
}

2.在 tabbar 页面中设置

onShow() {if (typeof this.getTabBar === "function" && this.getTabBar()) {this.getTabBar().setData({// 这里的数字对应tabbar对应的索引selected: 4,});}
},

三、效果图

在这里插入图片描述


总结

提示:

不要无脑复制,复制到自己的项目中后记得更改图片、页面路径!!!
如需自定义 头部 navbar 请点击这里

这篇关于微信小程序自定义 底部 tabbar (中间凸起)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_72228920/article/details/131462077
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/308607

相关文章

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

如何自定义一个log适配器starter

《如何自定义一个log适配器starter》:本文主要介绍如何自定义一个log适配器starter的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求Starter 项目目录结构pom.XML 配置LogInitializer实现MDCInterceptor

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt