uview2.0自定义tabbar

news2024/7/6 18:39:29

在这里插入图片描述

tabbar组件

<template>
	<u-tabbar :value="tab" @change="changeTab" :fixed="true" :border="true" :placeholder="true"
		:safeAreaInsetBottom="true">
		<u-tabbar-item text="消息" icon="chat" badge="3"></u-tabbar-item>
		<u-tabbar-item text="">
			<image style="width: 80rpx;height: 80rpx;" slot="active-icon" src="../static/wallet.png"></image>
			<image style="width: 80rpx;height: 80rpx;" slot="inactive-icon" src="../static/wallet.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="设置" icon="setting"></u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		props: {
			tab: {
				type: Number,
				require: true
			},
		},
		data() {
			return {
				list: ["/pages/message/index", '/pages/home/index', "/pages/set/index"]
			}
		},
		methods: {
			changeTab(name) {
				console.log(88, name)
				uni.reLaunch({
					url: this.list[name]
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>

main.js全局组件注册

import tabbar from './components/tabbar.vue'
Vue.component('tabbar', tabbar)

主页面使用

  • 在三个主页面分别引入组件
  • 传入对于的索引即可
<!-- 自定义底部-->
<tabbar :tab="1"></tabbar>

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

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

相关文章

react-sortable-hoc 拖拽列表上oncick事件失效

const SortableItem SortableElement(({value, onChangePayment}) > {const onClickItem () > {// todo}return (<View className"-item" onClick{onClickItem}>xxxxxxx</View>) })问题&#xff1a;onClick 无效 解决&#xff1a;添加distance

Lazada上成功吸引消费者有哪些小妙招?

作为销售平台来说,其实网上可以搜索到,或者通过下载软件轻松就可以将APP下载了,然后接下来就是注册和开店去吸引消费者的过程了。对于现在比较火爆的Lazada来说,如果想要在上面成功吸引更多的消费者,需要有哪些优质的推广策略呢? 品牌效应很重要 其实Lazada首先走的就是品牌效…

PAT 1114 Family Property

个人学习记录&#xff0c;代码难免不尽人意 Sample Input: 10 6666 5551 5552 1 7777 1 100 1234 5678 9012 1 0002 2 300 8888 -1 -1 0 1 1000 2468 0001 0004 1 2222 1 500 7777 6666 -1 0 2 300 3721 -1 -1 1 2333 2 150 9012 -1 -1 3 1236 1235 1234 1 100 1235 5678 9012 …

文心问数Sugar Bot :大模型+BI,多轮会话自动生成可视化图表与数据结论

Sugar BI 的文心问数功能是基于大语言模型实现的&#xff0c;支持您使用自然语言&#xff0c;通过多轮会话的方式&#xff0c;获取实时数据的图表展现&#xff0c;也可以自动为您总结与图表相关的业务结论。 文心问数功能邀测中&#xff0c;欢迎CSDN的用户前来报名&#xff1a;…

SQL地址门牌排序,字典序转为数字序

页面有一批地址数据查询&#xff0c;结果字符排序默认是字典序的&#xff0c;所以造成了门牌3号在30号之前&#xff0c;影响用户体验&#xff1b; id, road_code, road_name, address_fullname, address_name 102 10086 人民一路 北江省南海市西湖区人民一路3号 3号 103 10086…

YOLO目标检测——小狗图像数据集下载分享

小狗图像数据集 小狗图像数据集是一种常用的用于研究和分析狗狗图像分类问题的数据集&#xff0c;它包含了大量不同品种和姿势的小狗图像样本&#xff0c;用于训练和评估狗狗图像分类算法的性能&#xff0c;共同540张图片&#xff0c;8个不同类别小狗。 数据集点击下载&#xf…

蜜蜂剪辑安装教程

安装蜜蜂剪辑&#xff1a; 1、首先&#xff0c;打开您的Windows电脑并浏览至蜜蜂剪辑的官方网站。 https://www.apowersoft.com.cn 2、点击“下载”按钮&#xff0c;在下载页面中选择您需要的版本&#xff0c;然后下载软件安装程序。 百度网盘&#xff1a; 链接&#xff1a;htt…

10个非常有用的Python库,你知道几个?

整理&#xff5c;TesterHome 这里给大家介绍10个不是最流行但非常有用的Python库&#xff0c;希望可以提供参考帮助。 PyO3 PyO3是一个Rust库&#xff0c;可以让你在Rust中编写Python模块。它可以利用 Rust 的速度和安全性编写高性能的 Python 模块。 https://github.com/PyO3…

镭速传输助力广电行业大数据高效分发,提升智慧融媒水平

随着互联网技术如大数据、人工智能、云计算等和移动通信技术如5G等的快速进步和实际应用&#xff0c;媒体行业发展正式进入智慧时代&#xff0c;智慧融媒成为媒体融合发展的新阶段&#xff0c;全面应用在超高清、云服务、融媒演播、VR等新兴技术为代表的各个方面。 以上技术的…

什么是决策树

什么是决策树 在游戏中遇到敌人是选择攻击还是逃跑&#xff1f;如果选择攻击&#xff0c;是选择普通的物理攻击还是魔法攻击&#xff1f;为达到目标根据一定的条件进行选择的过程&#xff0c;就是决策树(DT Tree)。 决策树模型非常经典&#xff0c;在机器学习中常被用于分类&…

国内智慧工业的实践,在一首曙光《长歌行》中

工业是国民经济的主战场&#xff0c;是经济命脉。因此&#xff0c;智慧工业也被认为是第四次工业革命的关键。 但提到中国智慧工业&#xff0c;不禁让人脑海中浮现出一首《长歌行》。 一方面&#xff0c;智慧工业的实现周期很长&#xff0c;AI算力、算法等新技术进入工业领域所…

UI设计第一步,在MasterGo上开展一个新项目

我们都知道&#xff0c;一个完整的项目&#xff0c;要经历创建团队、搭建组件库、应用规范以及管理设计资产&#xff0c;那么今天小编就在MasterGo中带你从0到1开展一个全新的项目。 你一定遇到过这种情况&#xff0c;同团队的设计师&#xff0c;由于使用不同版本或不同软件&a…

递增子序列【回溯】

递增子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以视作递增序列的一种特殊情况。 …

堆中分配二维数组初始化排序

方法一&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h> int getmem(char *** parry,int *depth,int *len){ int mydepth *depth; int mylen *len; char ** myarry (char **)malloc(mydepth*sizeof(char*)); for(int i0;i<…

库存预占架构升级方案设计-交易库存中心 | 京东物流技术团队

背景介绍 伴随物流行业的迅猛发展&#xff0c;一体化供应链模式的落地&#xff0c;对系统吞吐、系统稳定发出巨大挑战&#xff0c;库存作为供应链的重中之重表现更为明显。近三年数据可以看出&#xff1a; 接入商家同比增长37.64%、货品种类同比增长53.66% 货品数量同比增长4…

临时功能展示数据库表未添加主键导致Excel导入数据重复

Java对Excel等文档解析上传到数据库或服务器问题记录 临时功能展示数据库表未添加主键导致Excel导入数据重复 如图,问题发现是因为Excel表中只有两千多条数据但导入数据库后却有五千多条,当时在代码中疯狂找原因也未果,最后尝试给数据库添加主键解决问题! 去除重复数据 总条…

jdk8对象列表使用stream流基于某个字段(或某些条件)实现去重

直接上代码&#xff1a;(实现了去重加排序的效果) //换行只是为了方便看 userList.stream().collect(Collectors.collectingAndThen(Collectors .toCollection(() -> new TreeSet<>(Comparator.comparing(User::getAge))), ArrayList::new));comparing&#xff08;比…

谁偷走了我的存储容量?预留空间OP参上!

大家好&#xff0c;我是五月。 前言 不知道你有没有发现&#xff0c;每当买回来一块U盘&#xff0c;插入电脑发现永远比所标的容量小。 到底是谁偷走了我的容量&#xff1f; 真凶就是预留空间&#xff08;Over Provisioning&#xff09;&#xff0c;简称OP。 预留空间OP是…

DSP,国产C2000,数字电源,电机专用,国产经典之作,新品上市

1、替代TI 的 TMS320F280049 2、独立双核&#xff0c;主频400MHz 3、单精度浮点运算&#xff0c;三角函数运算 4、Flash 1MB&#xff0c;SRAM 1MB 5、12bit ADC&#xff0c;采样率 3.45MSPS 6、16个高分辨率 ePWM 优点&#xff1a; 1、主频400MHz&#xff0c;运算能力强 2、独…

攻防世界-ext3

原题 解题思路 下载下来的文件解压就可以看到非常多的文件夹&#xff0c;直接搜索flag 明显用base64加密了&#xff1a;解码工具