微信小程序自定义 底部 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 (中间凸起)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/308607

相关文章

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

自定义类型:结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐? 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识,并举出了两个例子,我们再举出两个例子继续说明: struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中,不同电脑的配置和操作系统(如Win11与Win7)可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行,需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下,使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此,在开发程序时,尽量使用

Spring 源码解读:自定义实现Bean定义的注册与解析

引言 在Spring框架中,Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义,Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制,帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry,以全面掌握Bean注册和解析的核心原理。

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 (最大值之和)给定整数序列 a0,⋯,an−1,求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr(其中0≤l≤r<n0≤l≤r<n)表示,对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同,当且仅当下标不同。 例如,当原序列为 [1,2,1,2] 时,要计算子序列 [

这些心智程序你安装了吗?

原文题目:《为什么聪明人也会做蠢事(四)》 心智程序 大脑有两个特征导致人类不够理性,一个是处理信息方面的缺陷,一个是心智程序出了问题。前者可以称为“认知吝啬鬼”,前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出,指个体可以从记忆中提取出的规则、知识、程序和策略,以辅助我们决策判断和解决问题。如果把人脑比喻成计算机,那心智程序就是人脑的