uni-app 自定义tabbar

uni-app 自定义tabbar

第一步:在components下创建目录tabbar,再在tabbar目录下创建tabbar.vue文件

<template><view class="tabbar jsf-around"><view class="tabbar-item dis-c align-center " v-for="(item,index) in list" :key="index" @click="changeTab(index)"><view class="dis-c align-center " v-if="current == index"><view class="xian"></view><view class="dis-c align-center padding-tb-20"><image :style="{width:item.width, height:item.height}" :src="item.selectedIconPath"></image><view class="text active font-pf-b margin-t-5">{{item.text}}</view></view></view><view v-else><view class="wu_xian"></view><view class="dis-c align-center padding-tb-20"><image :style="{width:item.width, height:item.height}" :src="item.iconPath"></image><view class="text font-pf-b margin-t-5">{{item.text}}</view></view></view><!-- <image class="img" :src="item.selectedIconPath" v-if="current == index"></image><image class="img" :src="item.iconPath" v-else></image><view class="text active font-pf-b " v-if="current == index">{{item.text}}</view><view class="text font-pf-b " v-else>{{item.text}}</view> --></view></view>
</template><script>export default {name: "tabbar",props: {current: String},created() {uni.hideTabBar()},data() {return {list: [{pagePath: "pages/index/index",iconPath: "../../static/tabbar/shouye.png",selectedIconPath: "../../static/tabbar/shouye(lan).png",text: "首页",width: '48rpx',height: '51rpx',}, {pagePath: "pages/tongji/tongji",iconPath: "../../static/tabbar/tongji.png",selectedIconPath: "../../static/tabbar/tongji(lan).png",text: "统计",width: '47rpx',height: '51rpx',},{pagePath: "pages/xiaoxi/xiaoxi",iconPath: "../../static/tabbar/xiaoxi.png",selectedIconPath: "../../static/tabbar/xiaoxi(lan).png",text: "消息",width: '51rpx',height: '51rpx',},{pagePath: "pages/wode/wode",iconPath: "../../static/tabbar/wode.png",selectedIconPath: "../../static/tabbar/wode(lan).png",text: "我的",width: '44rpx',height: '51rpx'}]}},methods: {changeTab(e) {// console.log(e);uni.switchTab({url: '/' + this.list[e].pagePath,})}}}
</script><style scoped>.tabbar {position: absolute;bottom: 0;z-index: 99;width: 100%;background: #FFFFFF;box-shadow: 0px -9px 49px 0px rgba(212, 221, 236, 0.47);border-radius: 60rpx 60rpx 0px 0px;background-repeat: no-repeat;/* padding: 0 0 20rpx 0; */},.tabbar-item {}.wu_xian {width: 30rpx;height: 8rpx;background: #fff;}.xian {width: 30rpx;height: 8rpx;background: #1C65F3;}/* .img {width: 45upx;height: 48upx;} */.text {font-size: 24upx;font-family: PingFang SC;font-weight: bold;color: #bbb;/* line-height: 27upx; */}.text.active {color: #1061F5;}
</style>

第二步:在page下创建index目录,创建index.vue文件,调用自定义组件tabbar

<template><view><tabbar current="0"></tabbar></view>
</template>
<script>import tabbar from '@/components/tabbar/tabbar'  //引用组件中的tabbarexport default {components: {tabbar	//引用组件中的tabbar},data() {return {}},created() {uni.hideTabBar()  //隐藏掉原生tabbar组件},methods: {}}
</script>

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

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

相关文章

如何使用 WavLM音频合成模型

微软亚洲研究院与 Azure 语音组的研究员们提出了通用语音预训练模型 WavLM。通过 Denoising Masked Speech Modeling 框架&#xff08;核心思想是通过预测被掩蔽&#xff08;即遮蔽或删除&#xff09;的语音部分来训练模型&#xff0c;同时还包括去噪的过程&#xff09;&#x…

使用单片机在图形点阵LCD上绘制波形图

使用单片机在图形点阵LCD上绘制波形图 需求&#xff1a; 假如有一组浮点数据&#xff0c;是通过AD转换得到的&#xff0c;保存在数组MyArray[]中&#xff0c;采集点数为len&#xff0c;采集周期为T&#xff0c;现在想用单片机在LCD上绘制出这组数据对应的波形图&#xff0c;该…

本地连接服务器Jupyter【简略版】

首先需要在你的服务器激活conda虚拟环境&#xff1a; 进入虚拟环境后使用conda install jupyter命令安装jupyter&#xff1a; 安装成功后先不要着急打开&#xff0c;因为需要设置密码&#xff0c;使用jupyter notebook password命令输入自己进入jupyter的密码&#xff1a; …

Python国内常用镜像源汇总

前言 由于网络问题&#xff0c;直接从Python官方的PyPI仓库下载软件包可能会遇到速度慢甚至无法访问的情况。还好&#xff0c;有几个国内大学和组织提供了PyPI的镜像&#xff0c;可以显著提高下载速度和稳定性。本文将介绍几个常用的Python镜像源&#xff0c;并指导如何在pip中…

新能源汽车动力电池浸没式冷却方案介绍与未来趋势

前言 新能源汽车的兴起标志着汽车工业的一次革命&#xff0c;其中动力电池的设计与性能成为了关键。浸没式冷却方案作为一种新兴的技术&#xff0c;为动力电池系统提供了有效的散热解决方案&#xff0c;其在未来的发展趋势备受关注。 一 动力电池浸没式冷却方案介绍 首先&am…

用python写算法——栈笔记

栈 栈的定义相关算法题 栈的定义 1.它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶&#xff0c;相对地&#xff0c;把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压栈&#xff0c;它是把新元素放到栈顶元素的上面&#xff0…

IIS配置SSL,根据pem和key生成pfx,openssl的版本不能太高

1、生成pfx文件 供应商给的文件是pef和key后缀的两个文件&#xff0c;在IIS里不好导入(如果有知道好导入的可以给我留言&#xff0c;谢谢。)。 1.1 下载OpenSSL工具&#xff0c;并安装。 主要用于将.pem文件转成.pfx文件。 下载OpenSSL的链接&#xff1a;http://slproweb.com/…

设计模式-结构型-适配器模式-Adapter

地址类 public class Address {public void street() {System.out.println("普通的街道");}public void zip() {System.out.println("普通的邮政编码");}public void city() {System.out.println("普通的城市");} } 荷兰地址类 public class …

飞书API(8):MySQL 入库定制版本

一、引入 通用版能解决百分之八九十的任务&#xff0c;剩下的部分任务需要进行定制。 先说明通用版本和定制版本有什么不同&#xff0c;通用版本就是只管大的数据类型&#xff0c;将数据处理为对应的类型入库&#xff0c;而定制版本会考虑局部列的数据类型&#xff0c;。举个…

10分钟了解Golang泛型

泛型是Golang在1.18版本引入的强大工具&#xff0c;能够帮助我们在合适的场合实现简洁、可读、可维护的代码。原文: Go Generics: Everything You Need To Know 导言 可能有人会觉得Go泛型很难&#xff0c;因此想要借鉴其他语言&#xff08;比如Java、NodeJS&#xff09;的泛型…

class常量池、运行时常量池和字符串常量池详解

类常量池、运行时常量池和字符串常量池这三种常量池&#xff0c;在Java中扮演着不同但又相互关联的角色。理解它们之间的关系&#xff0c;有助于深入理解Java虚拟机&#xff08;JVM&#xff09;的内部工作机制&#xff0c;尤其是在类加载、内存分配和字符串处理方面。 类常量池…

一个小球从100米落下,每次落下弹起的高度是上一次的一半,问需要几次后高度小于10米

一个小球从100米落下&#xff0c;每次落下弹起的高度是上一次的一半&#xff0c;问需要几次后高度小于10米&#xff1f;我练习所以用了 // 匿名函数 let fren 0; let fre function(height) {for (let i 0; height > 10; i) {fren;height height * 0.5}return fren; } c…

湖南知识付费系统开发公司,教育机构如何提高转化率?有哪些途径?

教育行业必须线上线下一起抓。当下教育机构不得不考虑线上招生、线上教学和服务。但是大多数人&#xff1a;没思路、没人才&#xff0c;不知道如何下手?其实线上运营也没那么难&#xff0c;“危机”即“机遇”。教育机构如何提高转化率&#xff1f;有哪些途径&#xff1f; 一、…

基于STM32单片机的室内温湿度及PM2.5浓度监测报警系统

基于STM32单片机的室内温湿度及PM2.5浓度监测报警系统 摘要&#xff1a; 本文设计并实现了一个基于STM32单片机的室内温湿度及PM2.5浓度监测报警系统。该系统通过集成温湿度传感器和PM2.5传感器&#xff0c;实时监测室内环境参数&#xff0c;并将数据通过液晶显示屏实时显示。…

docker修改默认安装路径

docker安装之后默认在 /etc/docker 在/etc/docker 文件下有一个daemon -json 没有就新增 {"registry-mirrors": ["https://kfwkfulq.mirror.aliyuncs.com","https://2lqq34jg.mirror.aliyuncs.com","https://pee6w651.mirror.aliyuncs.c…

【计算机网络】物理层传输介质 习题3

双绞线是用两根绝缘导线绞合而成的&#xff0c;绞合的目的是( )。 A.减少干扰 B.提高传输速度 C.增大传输距离 D.增大抗拉强度 在电缆中采用屏蔽技术带来的好处主要是( ) A.减少信号衰减 B. 减少电磁干扰辐射 C.减少物理损坏 D. 减少电缆的阻抗 利用一根同轴电缆互连主机构成…

Linux-页(page)和页表

本文在页表方面参考了这篇博客&#xff0c;特别鸣谢&#xff01; 【Linux】页表的深入分析 1. 页帧和页框 页帧&#xff08;page frame&#xff09;是内存的最小可分配单元&#xff0c;也开始称作页框&#xff0c;Linux下页帧的大小为4KB。 内核需要将他们用于所有的内存需求&a…

Linux(Ubuntu24.04) 安装 MinIO

本文所使用的 Ubuntu 系统版本是 Ubuntu 24.04 ! # 1、下载 MinIO wget https://dl.min.io/server/minio/release/linux-amd64/minio# 2、添加可执行权限 chmod x minio# 3、导出环境变量&#xff0c;用于设置账号密码&#xff0c;我设置的账号和密码都是 minioadmin export MI…

[蓝桥杯]真题讲解:AB路线(BFS+分层图)

[蓝桥杯]真题讲解&#xff1a;AB路线&#xff08;BFS分层图&#xff09; 一、视频讲解二、正解代码1、C2、python33、Java 一、视频讲解 [蓝桥杯]真题讲解&#xff1a;AB路线&#xff08;BFS分层图&#xff09; 二、正解代码 1、C #include<bits/stdc.h> #define INF …

GO:流程控制

if 用法&#xff1a; if condition {// do something }if condition {// do something } else {// do something }if condition1 {// do something } else if condition2 {// do something else }else {// catch-all or default }switch 相比较 C 和 Java 等其它语言…