uview2.0自定义tabbar

在这里插入图片描述

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.rhkb.cn/news/102937.html

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

相关文章

flutter对数组中某个数据二次加工成单独的数组

如何将数据[2,1,2,2,2,1,2,2,3,2,2,2,2,3,2,2,2,2,2,3,2,4,2,2,1,2,3,2,4,2]加工成 [[2], 1, [2, 2, 2], 1, [2, 2], 3, [2, 2, 2, 2], 3, [2, 2, 2, 2, 2], 3, [2], 4, [2, 2], 1, [2], 3, [2], 4, [2]]。这是实际工作中遇到的问题&#xff0c;UI要求将某一类型数据&#xff…

wx原生微信小程序入门常用总结

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、定义值和修改值1、定义值2、修改值&#xff08;1&#xff09;代码&#xff08;2&#xff09;代码说明&#xff08;3&#xff09;注意点 二、点击事件三、微…

简历考察点2_《CiCi-基于Vue3.0的智能音乐分享平台》

&#xff08;1&#xff09;项目初始化和推荐页面开发&#xff1a; 重点&#xff1a;轮播图、Scroll、下拉加载方法实现、 问题一&#xff1a;轮播图实现 ① 获取轮播图数据&#xff1a;虽然找到接口了&#xff0c;但是由于XHR请求在浏览器端会有跨域的限制&#xff0c;不能直…

基于jenkins构建生成CICD环境

目录 一、安装配置jenkins 1、环境配置 2、软件要求 3、jdk安装&#xff08;我是最小化安装&#xff0c;UI自带java要先删除rm -rf /usr/local/java 4、安装jenkins-2.419-1.1 二、Jenkins配置 1、修改jenkins初始密码 2、安装 Jenkins 必要插件 3、安装 Publish Over SS…

一生一芯8——在github上添加ssh key

为在github上下载代码框架&#xff0c;这里在github上使用ssh key进行远程连接&#xff0c;方便代码拉取 参照博客https://blog.csdn.net/losthief/article/details/131502734 本机 系统ubuntu22.04 git 版本2.34.1 本人是第一次配置&#xff0c;没有遇到奇奇怪怪的错误&…

DockerFile解析

1. 是什么 Dockerfile是田来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本 1.1 概述 1.2 官网 Dockerfile reference | Docker Documentation 1.3 构建三步骤 1. 编写dockerfile文件 2. docker build命令构建镜像 3. docker run依镜像运…

基于Opencv的虚拟拖拽项目

预备知识 勾股定理 跟随移动算法 手势识别图解 项目源代码 """ 演示一个简单的虚拟拖拽 步骤&#xff1a; 1、opencv 读取视频流 2、在视频图像上画一个方块 3、通过mediapipe库获取手指关节坐标 4、判断手指是否在方块上 5、是&#xff0c;方块跟着移动 6、…

微服务中间件--统一网关Gateway

统一网关Gateway 8.统一网关Gatewaya.搭建网关服务b.路由断言工厂c.路由过滤器GatewayFilterd.全局过滤器GlobalFiltere.过滤器的执行顺序f.网关的cors跨域配置 8.统一网关Gateway 网关功能&#xff1a; 身份认证和权限校验服务路由、负载均衡请求限流 网关的技术实现 在Spr…

Docker容器与虚拟化技术:GitHub账户注册

目录 一、实验 1.GitHub 一、实验 1.GitHub &#xff08;1&#xff09;GitHub是一个面向开源及私有软件项目的托管平台&#xff0c;因为只支持Git作为唯一的版本库格式进行托管&#xff0c;故名GitHub。 &#xff08;2&#xff09;官网 GitHub: Let’s build from here …

微服务中间件--MQ

MQ MQa.安装RabbitMQb.消息模型c.SpringAMQP发送和接收d.WorkQueue模型e.发布订阅模型1) FanoutExchange2) DirectExchange3) TopicExchange f.消息转换器 MQ 同步调用的问题 微服务间基于Feign的调用就属于同步方式&#xff0c;存在一些问题。 耦合度高&#xff1a;每次加入…

【FAQ】云存储EasyCVR视频汇聚平台分发rtsp流时,出现“用户已过期”提示该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

在当今信息化社会中的安全大文件传输

随着科技的不断进步&#xff0c;数据已经成为各个领域和行业的宝贵财富。然而&#xff0c;随之而来的数据传输和交换问题也成为一个日益突出的挑战。在这篇文章中&#xff0c;我们将探讨在当今信息化社会中的安全大文件传输的重要性&#xff0c;以及如何应对传统传输方式所面临…

【C++】—— 简述C++11新特性

序言&#xff1a; 从本期开始&#xff0c;我将会带大家学习的是关于C11 新增的相关知识&#xff01;废话不多说&#xff0c;我们直接开始今天的学习。 目录 &#xff08;一&#xff09;C11简介 &#xff08;二&#xff09;统一的列表初始化 1、&#xff5b;&#xff5d;初始…

类与对象(中)

类与对象&#xff08;中&#xff09; 一、类的六个默认成员函数二、构造函数1、概念2、代码3、特点4、编译器生成的默认构造函数的作用&#xff08;1&#xff09;内置类型&#xff08;基本类型&#xff09;和自定义类型的概念&#xff08;2&#xff09;作用&#xff08;3&#…

(WAF)Web应用程序防火墙介绍

&#xff08;WAF&#xff09;Web应用程序防火墙介绍 1. WAF概述 ​ Web应用程序防火墙&#xff08;WAF&#xff09;是一种关键的网络安全解决方案&#xff0c;用于保护Web应用程序免受各种网络攻击和威胁。随着互联网的不断发展&#xff0c;Web应用程序变得越来越复杂&#x…

2021年03月 C/C++(四级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;酒鬼 Santo刚刚与房东打赌赢得了一间在New Clondike 的大客厅。今天&#xff0c;他来到这个大客厅欣赏他的奖品。房东摆出了一行瓶子在酒吧上。瓶子里都装有不同体积的酒。令Santo高兴的是&#xff0c;瓶子中的酒都有不同的味道。房东说道&#xff1a;“你可以…

机器学习深度学习——针对序列级和词元级应用微调BERT

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——NLP实战&#xff08;自然语言推断——注意力机制实现&#xff09; &#x1f4da;订阅专栏&#xff1a;机…

游戏开发服务器选型的横向对比

来源一个某乎的作者&#xff0c;貌似来自台湾 上篇介绍了go版本的游戏服务器&#xff0c;这篇介绍下其它语言版本&#xff1a; SkynetkbengineNoahGameFramePomeloPinusET使用的语言C/LuaCCNodejsTypeScriptC#概述云风前辈开源的框架mmo框架server一个快速的、可扩展的、分布…

win11出现安全中心空白和IT管理员已限制对此应用的某些区域的访问

问题 windows安全中心服务被禁用 winr 输入services.msc 找到windows安全中心服务查看是否被禁用&#xff0c;改为启动&#xff0c;不可以改动看第三条 打开设置&#xff0c;找到应用—windows安全中心–终止–修复–重置 重启如果还是不行看第四条 家庭版系统需要打开gped…

我是怎么从0到1搭建性能门禁系统的

背景 页面的性能对于用户的体验起着至关重要的作用&#xff0c;根据Mobify 研究发现&#xff0c;首页加载时间每减少100 毫秒&#xff0c;用户留存率就会增加1.11%。所以做好页面的性能优化&#xff0c;对于网站来说是一个非常重要的步骤。 在解决问题之前需要度量问题&#x…