uniapp使用vue3和ts开发小程序自定义tab栏,实现自定义凸出tabbar效果

要实现自定义的tabbar效果,可以使用自定义tab覆盖主tab来实现,当程序启动或者从后台显示在前台时隐藏自带的tab来实现。自定义一个tab组件,然后在里面实现自定义的逻辑。

组件中所使用的组件api可以看:Tabbar 底部导航栏 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

先在components/tabbar/里面实现组件逻辑:

<template><u-tabbar :value="tabIndex" @change="change" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"><u-tabbar-item text="首页" icon="home"></u-tabbar-item><view class="tabars" @click="tabMiddle"><view class="item"><image class="img" src="../../static/images/gongshang.png" mode="widthFix"></image></view></view><u-tabbar-item text="我的" icon="account"></u-tabbar-item></u-tabbar>
</template><script setup lang="ts">
import { ref } from 'vue';const tabIndex = ref(0);const change = function (index) {tabIndex.value = indexconsole.log("调用父组件的tab切换", index);if (index == 0) {uni.switchTab({url: '/pages/home/index'})} else if (index == 1) {uni.switchTab({url: '/pages/my/index'})}
};// 点击中间凸出来的tab
const tabMiddle = function () {console.log("点击中间的tab");
}</script><style lang="scss">
.tabars {width: 90rpx;height: 70rpx;display: flex;flex-direction: column;align-content: center;position: relative;bottom: 50rpx;border-radius: 50%;background-color: #fff;border-top: 2px solid #dadbde;padding: 30rpx;.item {width: 100%;height: 100%;display: flex;justify-content: center;.img {width: 80%;}}
}
</style>

组件里面实现tab切换的api里面使用规范:uni.navigateTo(OBJECT) | uni-app官网

注意看使用switchTab的时候,url的前面要有/,然而pages.json里面的是不需要的。

 

然后只需要在tab的主页面中引入这个组件即可:

然后重新打开即可看到效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/186288.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Centos7下搭建H3C log服务器

rsyslogH3C 安装rsyslog服务器 关闭防火墙 systemctl stop firewalld && systemctl disable firewalld关闭selinux sed -i s/enforcing/disabled/ /etc/selinux/config && setenforce 0centos7服务器&#xff0c;通过yum安装rsyslog yum -y install rsysl…

【uniapp】六格验证码输入框实现

效果图 代码实现 <view><view class"tips">已发送验证码至<text class"tips-phone">{{ phoneNumber }}</text></view><view class"code-input-wrap"><input class"code-input" v-model"…

AI:75-基于生成对抗网络的虚拟现实场景增强

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌在这个漫长的过程,中途遇到了不少问题,但是…

[量化投资-学习笔记008]Python+TDengine从零开始搭建量化分析平台-CCI和ATR

目录 1. 指标简介CCIATR 2. 程序编写题外话 1. 指标简介 将这两个指标放在一起&#xff0c;一方面是因为这两个指标都属于摆动指数&#xff0c;可以反应市场的活跃度。 另一方面是因为CCI和ATR与之前提到的EMA,MACD,布林带的三个指标的计算基础不同。之前的三个指标都是以收盘…

坐标系转换(仅作记载)

一.极坐标转换为普通坐标系 参考&#xff1a;极坐标方程与直角坐标方程的互化 - 知乎 (zhihu.com) 公式&#xff1a;&#xff08;无需考虑象限引起的正负问题&#xff09; 普通坐标系转换为极坐标系 参考&#xff1a; 极坐标怎么与直角坐标系相互转化&#xff1f; - 知乎 (zh…

Docker本地镜像发布到阿里云或私有库

本地镜像发布到阿里云流程 &#xff1a; 1.自己生成个要传的镜像 2.将本地镜像推送到阿里云: 阿里云开发者平台:开放云原生应用-云原生&#xff08;Cloud Native&#xff09;-云原生介绍 - 阿里云 2.1.创建仓库镜像&#xff1a; 2.1.1 选择控制台&#xff0c;进入容器镜像服…

如何在Linux上部署1Panel运维管理面板并远程访问内网进行操作

文章目录 前言1. Linux 安装1Panel2. 安装cpolar内网穿透3. 配置1Panel公网访问地址4. 公网远程访问1Panel管理界面5. 固定1Panel公网地址 前言 1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。高效管理,通过 Web 端轻松管理 Linux 服务器&#xff0c;包括主机监控、…

广和通5G模组FM650助力阿里云打造无影魔方Pro

随着云基础设施的完善及云电脑体验的不断优化&#xff0c;越来越多的个人和企业选择无影云电脑进行办公。基于云原生的云网端技术架构&#xff0c;无影云电脑相比传统PC&#xff0c;具有弹性、安全、保障个人数据等产品优势。 10月31日&#xff0c;阿里云在杭州云栖大会上宣布…

RSA 2048位算法的主要参数N,E,P,Q,DP,DQ,Qinv,D分别是什么意思 哪个是通常所说的公钥与私钥 -安全行业基础篇5

非对称加密算法RSA 在RSA 2048位算法中&#xff0c;常见的参数N、E、P、Q、DP、DQ、Qinv和D代表以下含义&#xff1a; N&#xff08;Modulus&#xff09;&#xff1a;模数&#xff0c;是两个大素数P和Q的乘积。N的长度决定了RSA算法的安全性。 E&#xff08;Public Exponent&a…

原神游戏干货分享:探索璃月的宝箱秘密,提高游戏资源获取效率!

《原神》是一款备受玩家喜爱的开放世界冒险游戏&#xff0c;而在游戏中获取资源是提升角色实力的重要途径。在这篇实用干货分享中&#xff0c;我们将介绍一些探索璃月地区的宝箱秘密&#xff0c;帮助你提高游戏资源获取的效率。 首先&#xff0c;璃月地区的宝箱分为普通宝箱和精…

本地部署企业邮箱,让企业办公更安全高效

随着信息化时代的到来&#xff0c;企业邮箱几乎成了企业办公的标配&#xff0c;承载着企业业务往来和办公协同的重要职能。基于安全性、个性化需求、系统集成等方面的需要&#xff0c;许多企业选择本地部署企业邮箱&#xff0c;本地化部署不仅能有效保障企业信息安全的同时&…

家用工作站方案:ThinkBook 14 2023 版

本篇文章聊聊今年双十一&#xff0c;我新购置的家用工作站设备&#xff1a;ThinkBook 14 2023&#xff0c;一台五千元价位&#xff0c;没有显卡的笔记本。我为什么选择它&#xff0c;它又能做些什么。 写在前面 2021 年年中的时候&#xff0c;我写过一篇《廉价的家用工作站方…

React向组件内部动态传入带内容的结构--props

children props&#xff1a;通过组件标签体传入结构 <A><B>xxx</B> </A> {this.props.children}render props&#xff1a;通过组件标签属性传入结构&#xff0c;一般用render函数属性 <A render{data> <C data{data}></C>}></…

5 Tensorflow图像识别(下)模型构建

上一篇&#xff1a;4 Tensorflow图像识别模型——数据预处理-CSDN博客 1、数据集标签 上一篇介绍了图像识别的数据预处理&#xff0c;下面是完整的代码&#xff1a; import os import tensorflow as tf# 获取训练集和验证集目录 train_dir os.path.join(cats_and_dogs_filter…

SQL Server SSIS ETL job执行相关操作

创建SSIS项目 Excel导入SQL Server 构建Excel源 配置Excel源信息 配置SQL Server目标 双击“ADO NET目标” job执行 新建job 右键“SQL Server代理”的“作业”&#xff0c;点击“新建作业”&#xff0c;弹出“新建作业”的选项页 首先是“常规”选项页&#xff0c;…

50代码审计-PHP无框架项目SQL注入挖掘

代码设计分为有框架和无框架 挖掘技巧&#xff1a;随机挖掘&#xff0c;定点挖掘&#xff0c;批量挖掘&#xff08;用工具帮助扫描探针&#xff0c;推荐工具&#xff1a;fortify&#xff0c;seay系统&#xff09;。 1.教学计划&#xff1a; ---审计项目漏洞 Demo->审计思…

卡尔曼滤波EKF

目录 一、概述 二、卡尔曼滤波的5个公式 三、应用案例&#xff1a;汽车运动 四、应用案例&#xff1a;温度估计 五、总结 一、概述 初学者对于卡尔曼滤波5个公式有点懵&#xff0c;本文先接地气地介绍5个公式&#xff0c;然后举两个常用例子加强理解&#xff0c;同时附有M…

微服务中配置文件(YAML文件)和项目依赖(POM文件)的区别与联系

实际上涉及到了微服务架构中的两个重要概念&#xff1a;服务间通信和项目依赖管理。在微服务架构中&#xff0c;一个项目可以通过两种方式与另一个项目建立依赖关系&#xff1a;通过配置文件&#xff08;如YAML文件&#xff09;和通过项目依赖&#xff08;如POM文件&#xff09…

Excel 转 Json 、Node.js实现(应用场景:i18n国际化)

创作灵感来源于在线转换是按照换行符去转换excel内容换行符后很难处理 本文是按单元格转换 const xlsx require(node-xlsx) const fs require(fs) const xlsxData xlsx.parse(./demo.xlsx) // 需要转换的excel文件// 数据处理 方便粘贴复制 const data xlsxData[2].data …