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 = index
  console.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的主页面中引入这个组件即可:

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【今天放个大招,带你手把手搭建 Jenkins 的分布式构建】

UI 自动化测试代码写完了以后&#xff0c;会放到 Jenkins 这样的持续集成工具上去构建。 如果 Jenkins 平台是搭建在服务器上&#xff0c;会面临 2 个问题&#xff1a; 第一个问题是 UI 自动化测试需要渲染界面&#xff0c;需要消耗大量的 CPU 和内存资源&#xff0c;如果服务器…

海康Visionmaster-全局脚本:通过全局脚本获取通讯输 入的参数并赋值给全局变量

全局脚本根据外部通讯输入的数值赋值给全局变量&#xff0c;实现输入与全局变量之间的数值绑定。&#xff08;一般应用于定位、标定等需要外界物理值的场景)。 第一步&#xff0c;在 vm 通讯管理中设置好通讯设备&#xff0c;连接 第二步&#xff0c;根据通讯设备、接收的信息…

如何对非线性【SVM】进行三维可视化

首先导入相应的模块&#xff0c; from sklearn.datasets import make_blobs from sklearn.svm import SVC import matplotlib.pyplot as plt import numpy as np 我们使用make_circles()函数创建散点图&#xff0c;并将散点图中的点的横纵坐标赋值给x,y&#xff0c;其中x是特…

Git中的 fork, clone,branch

一、是什么 fork fork&#xff0c;英语翻译过来就是叉子&#xff0c;动词形式则是分叉&#xff0c;如下图&#xff0c;从左到右&#xff0c;一条直线变成多条直线 转到git仓库中&#xff0c;fork则可以代表分叉、克隆 出一个&#xff08;仓库的&#xff09;新拷贝 包含了原来…

奔驰E Coupe 升级鼠标按键 操作简单 完美结合

人机交互系统正是汽车智能化发展的产物&#xff0c;它实现了人与车之间的互联。不知道大家有没有发现&#xff0c;在很多奔驰车的中央扶手箱前&#xff0c;有一块类似于“鼠标”的操作区&#xff0c;它并不是我们常见的换挡杆&#xff0c;而是奔驰研发的独立影音控制系统COMAND…

(11_06)函数计算 FC 3.0 发布,全面降价,最高幅度达93%,阶梯计费越用越便宜

作为国内最早布局 Serverless 的云厂商之一&#xff0c;阿里云在 2017 年推出函数计算 FC&#xff0c;开发者只需编写代码并上传&#xff0c;函数计算就会自动准备好相应的计算资源&#xff0c;大幅简化开发运维过程。阿里云函数计算持续在 Serverless GPU 方面投入研发&#x…

数据结构与算法(Java版) | 排序算法的介绍与分类

各位朋友&#xff0c;现在我们即将要进入数据结构与算法&#xff08;Java版&#xff09;这一系列教程中的排序算法这一章节内容的学习中了&#xff0c;所以还请大家系好安全带&#xff0c;跟随我准备出发吧&#xff01; 相信诸位应该都知道排序算法有很多种吧&#xff01;就算没…

iPortal如何灵活设置用户名及密码的安全规则

作者&#xff1a;yx 目录 前言 一、配置文件介绍 1、<passwordRules>节点 注意事项&#xff1a; 2、<usernameRules>节点 二、应用实例 1、配置文件设置 2、验证扩展结果 三、结果展示 前言 SuperMap iPortal提供了扩展账户信息合规度校验规则的能力&#…

太坑了,降低 代码可读性的 12 个技巧

工作六七年以来&#xff0c;接手过无数个烂摊子&#xff0c;屎山雕花、开关编程已经成为常态。 下面细数一下 降低代码可读性&#xff0c;增加维护难度的 12 个编码“技巧”。 假设一个叫”二狗“ 的程序员&#xff0c;喜欢做以下事情。 1. 二狗积极拆分微服务&#xff0c;一个…

二.831(KMP)字符串详解

ne[3]枚举2次 ne[4],枚举3次 ne[5],枚举4次]b在后面了,就一个b就不可能在前面了]b舍弃 ne[6],枚举i-1次]一眼看最长相等前后缀,就是aab,aab ne[7],aaba,aaba ne[8],枚举i-1次]aabaa,aabaa 同理 怎么快速看呢!我想把b给夹起来]把中间夹的数越多就多 其实 加的有规律,最…

多级缓存之JVM进程缓存

1.什么是多级缓存 传统的缓存策略一般是请求到达Tomcat后&#xff0c;先查询Redis&#xff0c;如果未命中则查询数据库&#xff0c;如图&#xff1a; 存在下面的问题&#xff1a; 请求要经过Tomcat处理&#xff0c;Tomcat的性能成为整个系统的瓶颈 Redis缓存失效时&#xff0…

【基础IO⑨】:重定向实现原理 “Linux下一切皆文件“

【基础IO⑨】&#xff1a;重定向原理 与 "Linux下一切皆文件" 一.重定向1.实现原理2.输出重定向3.输入重定向4.补充&#xff1a;简易shell中实现重定向 二."Linux下一切皆文件"1.虚拟文件系统(VFS) 一.重定向 我们首先关闭2号文件描述符&#xff0c;然后再…

antv/x6 自定义html节点并且支持动态更新节点内容

antv/x6 自定义html节点 效果图定义一个连接桩公共方法注册图形节点创建html节点动态更新节点内容 效果图 定义一个连接桩公共方法 const ports {groups: {top: {position: top,attrs: {circle: {r: 4,magnet: true,stroke: #cf1322,strokeWidth: 1,fill: #fff,style: {visib…

虚拟机Linux-Centos系统网络配置常用命令+Docker 的常用命令

目录 1、虚拟机Linux-Centos系统网络配置常用命令2、Docker 的常用命令2.1 安装docker步骤命令2.2 在docker容器中安装和运行mysql 2、dockerfile关键字区别(ADD/COPY,CMD/ENTRYPOINT) 1、虚拟机Linux-Centos系统网络配置常用命令 进入网络配置文件目录 cd /etc/sysconfig/ne…

监控actuator配置以及踩坑记录

以前这个监控都是领导去加&#xff0c;我顶多去修改一些时间参数&#xff0c;让我自己加还是头一次 正经踩了不少坑啊 1.依赖引入 先说配置过程 不对 先说我们项目结构 我们有一个common项目&#xff0c;作为一个公共项目。各种项目公用的依赖&#xff0c;都配置在common中…

深度学习中的数据类型介绍:FP32, FP16, TF32, BF16, Int16, Int8 ...

文章目录 0. 前言1. 数据的存储方式2. 不同数据类型介绍2.1 深度学习中常用的数据类型2.2 BF16 类型的优势2.3 不同数据类型的使用场景 0. 前言 相比于 CPU&#xff0c;GPU 在架构设计时将更多的晶体管用于数据处理&#xff0c;而不是数据缓存和流量控制&#xff0c;因此可以高…

关于网站安全的一些讨论

互联网的普及和发展为企业和个人提供了巨大的机会&#xff0c;但同时也伴随着网络安全威胁的增加。网站被攻击是一个常见的问题&#xff0c;可能导致数据泄露、服务中断和声誉受损。在本文中&#xff0c;我们将探讨与网络安全紧密相关的因素&#xff0c;分析为什么网站容易受到…

基础课18——智能客服系统架构

1.基础设施层 基础设施主要包括以下几点&#xff1a; 1. 硬件设施&#xff1a;包括服务器、存储设备、网络设备等&#xff0c;这是整个系统运行的物理基础。 2. 软件设施&#xff1a;包括操作系统、数据库管理系统、自然语言处理(NLP)工具和机器学习算法等&#xff0c;这些是…

SSM之Spring注解式缓存Redis以及redies中的击穿,雪崩,穿的三种现象

⭐⭐ Redis专栏&#xff1a;Redis专栏 ⭐⭐ 个人主页&#xff1a;个人主页 目录 一.SSM整合Redis 1.2配制Spring-redis.xml文件 1.3 applicationContext.xml 1.4 配置redis的key生成策略 二.redis的注解式开发 2.1 redis的注解式是什么及其好处 2.2 redi…

Spring IoCDI入门

一&#xff1a;Spring IoC&DI概念 (1)Spring概念 &#x1f497;Spring是包含了众多工具方法的IoC容器&#xff0c;是一个开源框架&#xff0c;让我们的开发更加简单 &#x1f31f;Spring的两大核心和特点&#xff1a;IoC和AOP (2)IoC的介绍 1.概念 &#x1f497;IoC: Inv…