uniapp小程序uView自定义tabbar

news2025/1/21 18:52:28

两年没接触小程序,又重新拾请来

前言

工具:HBuilder X 3.99版本 微信开发者工具 1.06
语言:vue2 + uView

一、创建项目

先使用HBuilder X工具创建一个空白uni-app项目 uviewTest

二、安装和配置

HBuilder X找到工具-》插件安装-》插件市场
uview链接

配置成功后项目有一个uni_modules文件夹下uview-ui文件夹
引入js 在main.js中引入
在这里插入图片描述
引入css 在uni.scss文件最后引入

@import "@/uni_modules/uview-ui/theme.scss"; 
@import "@/uni_modules/uview-ui/index.scss";

css的引用二
在uni.scss中@import “@/uni_modules/uview-ui/theme.scss”;
在App.vue中@import “@/uni_modules/uview-ui/index.scss”;

配置page.json easycom 代码在下面

easycom的作用主要是:
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。

三、使用步骤

1、配置page.json文件

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app-uview"
			}
		},
		{
			"path": "pages/main/main",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"custom":true,
		"list":[
			{
				"pagePath": "pages/main/main"
			},
			{
				"pagePath": "pages/mine/mine"
			}
		]
	},
	"uniIdRouter": {},
	"easycom":{
		"autoscan":true,
		"custom":{
			"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue",
			"^my-(.*)": "@/components/my-$1/my-$1.vue" // 匹配components目录内的vue文件
		}
	}
	
}

2、创建文件

在这里插入图片描述

3、相关代码

//my-tabbar文件
<template>
	<view>
		<u-tabbar
			:value="currentTab"
			:fixed="true"
			:border="false"
			activeColor="#d81e06"
			:placeholder="false"
			 @change="changeTabIndex"
		>
			<u-tabbar-item 
			v-for="item in switchTabs"
			:key="item.name"  
			:text="item.text" :icon="item.iconName" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				switchTabs:[
					{
						"pagePath":"/pages/main/main",
						"iconName":"home",
						"text":"首页",
						"name":"home"
					},
					{
						"pagePath":"/pages/mine/mine",
						"iconName":"account",
						"text":"我的",
						"name":"mine"
					}
				]
			}
		},
		props:['currentTab'],
		methods:{
			changeTabIndex(e){
				let pagePath = this.switchTabs[e].pagePath
				uni.switchTab({
					url:pagePath
				})
			}
		}
	}
</script>
//App.vue文件
<template>
	<view class="content">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		components:{},
		onLoad() {
			uni.redirectTo({
				url:'/pages/main/main'
			})
		},
		methods: {

		}
	}
</script>
//main.vue文件
<template>
	<view class="content">
		首页
		<my-tabbar :currentTab='0'/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>
//mine.vue 文件
<template>
	<view class="content">
		我的
		<my-tabbar :currentTab='1'/>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		onLaunch() {	
		},
		methods:{
		}
	}
</script>

四 、运行

HBuilder X 运行-》运行到小程序模拟器

在这里插入图片描述

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

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

相关文章

物理机迁移为虚拟机(vmware converter6.0)

物理机迁移为虚拟机&#xff08;ESXI6.5&#xff09; 注&#xff1a; 本操作需要提前在物理机上安装好vmware converter工具 vmware converter6.0可以迁移至ESXI6.5,如ESXI版本更高&#xff0c;可以自己尝试。 1、 安装好vmware converter&#xff0c;运行vmware converter。…

排序算法--堆排序

堆排序的时间复杂度是O&#xff08;N*logN&#xff09;&#xff0c;优于选择排序O&#xff08;N^2&#xff09; 一、堆 1.堆的概念&#xff1a;堆一般指的是二叉堆&#xff0c;顾名思义&#xff0c;二叉堆是完全二叉树或者近似完全二 2.堆的性质&#xff1a;①完全二叉树 ②每…

代码库管理工具Git介绍

阅读本文同时请参阅-----免费的Git图形界面工具sourceTree介绍 Git是一个分布式版本控制系统&#xff0c;它可以帮助开发者跟踪和管理代码历史。Git的命令行工具是使用Git的核心方式&#xff0c;虽然它可能看起来有些复杂&#xff0c;但是一旦掌握了基本命令&#xff0c;你…

JavaScript作用域及预解析

文章目录 1. 作用域介绍2. 变量的作用域*3. JS中没有块级作用域4. 作用域链5. 预解析预解析案例 1. 作用域介绍 全局作用域局部作用域相同的变量名称在不同的作用域中是不会相互影响的&#xff01; 2. 变量的作用域 全局变量&#xff1a;在全局下都可以使用&#xff1b;局部变…

【严格递增】2972统计移除递增子数组的数目 II

作者推荐 动态规划的时间复杂度优化 本文涉及知识点 严格递增 子数组 LeetCode2972. 统计移除递增子数组的数目 II 给你一个下标从 0 开始的 正 整数数组 nums 。 如果 nums 的一个子数组满足&#xff1a;移除这个子数组后剩余元素 严格递增 &#xff0c;那么我们称这个子…

算法打卡day5|哈希表篇01|Leetcode 242.有效的字母异位词 、19.删除链表的倒数第N个节点、202. 快乐数、1. 两数之和

哈希表基础知识 哈希表 哈希表关键码就是数组的索引下标&#xff0c;然后通过下标直接访问数组中的元素&#xff1b;数组就是哈希表的一种 一般哈希表都是用来快速判断一个元素是否出现集合里。例如要查询一个名字是否在班级里&#xff1a; 要枚举的话时间复杂度是O(n)&…

[数据集][目标检测]狗狗表情识别VOC+YOLO格式3971张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3971 标注数量(xml文件个数)&#xff1a;3971 标注数量(txt文件个数)&#xff1a;3971 标注…

GSVA -- 学习记录

文章目录 1.原理简介2. 注意事项3. 功能实现代码实现部分 4.可视化5.与GSEA比较 1.原理简介 Gene Set Variation Analysis (GSVA) 基因集变异分析。可以简单认为是样本数据中的基因根据表达量排序后形成了一个rank list&#xff0c;这个rank list 与 预设的gene sets&#xff…

【DL】深度学习之语音识别

目录 1 核心概念 2 安装依赖库 3 实践 语音信号处理&#xff08;Speech Signal Processing&#xff09;简称语音处理。 语音识别&#xff08;ASR&#xff09;和自然语言处理&#xff08;NLP&#xff09;&#xff1a;语音识别就是将语音信号转化成文字文本&#xff0c;简单实…

一文带你了解爆火的chatGPT强大功能!

原文&#xff1a;一文带你了解爆火的chatGPT强大功能&#xff01; 2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人…

Seawater resistant ADS-B Antenna for off-shore use

目录 Introduction Technical data Introduction This ADS-B antenna, made of V4A (1.4571 316Ti) stainless special steel, is suitable for off-shore use and includes mounting kit. Condensation in the antenna itself is excluded by a hermetically sealed seal. …

vue-router4 (六) 命名视图

命名视图可以使得同一级&#xff08;同一个组件&#xff09;中展示更多的路由视图&#xff0c;而不是嵌套显示&#xff0c; 命名视图可以让一个组件中具有多个路由渲染出口&#xff0c;这对于一些特定的布局组件非常有用。 应用场景&#xff1a; 比如点击login切换到组件A&am…

【Azure 架构师学习笔记】-Azure Synapse -- Link for SQL 实时数据加载

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Synapse】系列。 前言 Azure Synapse Link for SQL 可以提供从SQL Server或者Azure SQL中接近实时的数据加载。通过这个技术&#xff0c;使用SQL Server/Azure SQL中的新数据能够几乎实时地传送到Synapse&#xff08;…

Vue 3, TypeScript 和 Element UI Plus:前端开发的高级技巧与最佳实践

Vue 3、TypeScript 和 Element UI Plus 结合使用时&#xff0c;可以提供一个强大且灵活的前端开发环境。以下是一些高级用法和技巧&#xff0c;帮助你更有效地使用这些技术&#xff1a; 1. Vue 3 高级特性 Composition API 使用 setup 函数: Vue 3 引入了 Composition API&am…

HarmonyOS-卡片页面能力说明和使用动效能力

卡片页面能力说明 开发者可以使用声明式范式开发ArkTS卡片页面。如下卡片页面由DevEco Studio模板自动生成&#xff0c;开发者可以根据自身的业务场景进行调整。 ArkTS卡片具备JS卡片的全量能力&#xff0c;并且新增了动效能力和自定义绘制的能力&#xff0c;支持声明式范式的…

【JavaEE】_前端POST请求使用json向后端传参

目录 1. 关于json 2. 通过Maven仓库&#xff0c;将Jackson下载导入到项目中 3. 使用Jackson 3.1 关于readValue方法 3.2 关于Request.class类对象 3.3 关于request对象的属性类型 3.4 关于writeValueAsString 前端向后端传递参数通常有三种方法&#xff1a; 第一种&…

【自然语言处理三-self attention自注意是什么】

自然语言处理三-自注意力 self attention 自注意力是什么&#xff1f;自注意力模型出现的原因是什么&#xff1f;词性标注问题解决方法1-扩展window&#xff0c;引用上下文解决方法2-运用seq2seq架构新问题来了&#xff1a;参数量增加、无法并行的顽疾 自注意力self attention模…

Spring注解之前后端传值

目录 PathVariable 和 RequestParam RequestBody PathVariable 和 RequestParam PathVariable用于获取路径参数&#xff0c;RequestParam用于获取查询参数。 举个简单的例子&#xff1a; GetMapping("/lazzes/{clazzId}/teachers") public List<Teacher> …

笔记:GO1.19 带来的优化(重新编译juicefs)

## 背景 go编写的应用程序&#xff08;juicefs&#xff09;在k8s&#xff08;docker&#xff09;中运行&#xff0c;时不时出现 OOM Killed。 ## 分析 发现某些应用使用juicefs会导致内存使用飙升&#xff1b; k8s的pod给的内存资源&#xff1a;request 2G&#xff0c;limit…

QT摄像头采集

主界面为显示框&#xff0c;两个下拉框&#xff0c;一个是所有相机&#xff0c;一个是相机支持的分辨率 系统根据UI界面自动生成的部分不再描述&#xff0c;以下为其他部分源码 widget.h #include <QWidget> #include <QMouseEvent> class QCamera; class QCamer…