uniapp引入inconfont自定义导航栏

app,h5端引入

uniapp本身的全局设置中有个iconfontsrc属性
在这里插入图片描述
所以只需要
1.iconfont将需要的icon添加至项目
在这里插入图片描述
2.下载到本地解压后,将其中的ttf文件,放在static静态目录下
在这里插入图片描述
3.在page.json中对全局文件进行配置tabBar(导航图标)
“iconfontSrc”: “static/font/iconfont.ttf”, 这个属性是字体目录

"tabBar": {
		"iconfontSrc": "static/font/iconfont.ttf",
		"color": "#ffffff",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#fcbd71",
		"list": [{
			"pagePath": "pages/index/index",
		       "iconfont": {
				   // iconfont 图标设置 颜色 以及被选中的颜色
		       	"text": "\ue601",
				"color": "#000",
				"selectedText": "\ue601",
				"selectedColor": "#007aff"
		       },
			"text": "组件"
		}, {
			"pagePath": "pages/page2/page2",
			"iconPath": "static/image/index20.png",
			"selectedIconPath": "static/image/index2.png",
			"text": "接口"
		}]
	},
	

4.此时就可以在list对导航item添加iconfont属性
在这里插入图片描述
text就是将unicode码转换为h5可以识别的
还可以使用ttf来对导航进行自定义更改
在这里插入图片描述
buttoms 就是可以自己在导航上自己定义按钮只能有俩个并且是左,右对称
在这里插入图片描述
设置文字路径

在这里插入图片描述
此时可以配置文字图标 图标是unicode所以这个时候我们需要转换
在这里插入图片描述
在这里插入图片描述
反斜杠u转换为unicode码

在这里插入图片描述
成功
注意看似乎使用ttf的只有app和h5适配

既然以上全局文件不支持小程序,那么小程序如下

1.同上下载到本地,但是需要在项目设置中把base64码下载
在这里插入图片描述
2.将css文件复制粘贴项目的公共css目录和ttf文件导入static目录
在这里插入图片描述
并且在@font-face的配置哪里将src只保留url()部分

在这里插入图片描述

4.app.vue进行全局css样式导入
在这里插入图片描述
5.用css代码使用
在这里插入图片描述

<view class="iconfont icon-shouye">
			
		</view>

和上面一样,如果小程序也想实现定义导航呢
根据官方文档style的navifationstyle可以来定义
在这里插入图片描述
此时运行效果图
在这里插入图片描述
已经失去文字标题了
对此官方也有解释,使用自定义的时候会取消uniapp设置的样式,所以我们需要自己写
在这里插入图片描述
根据官方demo是自己写了个导航栏占位
在这里插入图片描述
css部分


<style scoped lang="scss">
.home{
	.wx-nav{
		margin-top: 100rpx;
		  height: var(--status-bar-height);
		        width: 100%;
		display: flex;
		
		justify-content: center;
		text-align: center;
		line-height-step: 200rpx;
	}
}

	
</style>

效果图
在这里插入图片描述
此时就实现了自定义导航栏 ,但是需要根据你的样匹配手机型号
但是此时h5端运行改该代码就会报错,所以要进行编译预处理

<template>
	<view class="home">
	<!-- #ifdef MP-WEIXIN -->
	<view class="wx-nav">
		<view class="iconfont icon-fangdajing"></view>
		<text>小 猴 体 育</text>
		<view class="iconfont icon-shouye"></view>
	</view>
	 <!-- #endif H5-->
	 <!-- 写代码块 -->
		<view class="wx-content">
			<text>我是内容</text>
		</view>
	</view>
</template>

这段代码看起来是使用了注释预处理指令来控制代码的条件编译,针对微信小程序(MP-WEIXIN)进行特定的展示。
在代码中有以下注释预处理指令:
<!-- #ifdef MP-WEIXIN -->
这个指令表示,下面的代码块将仅在当前编译环境为微信小程序时生效。
接下来是代码块:
<view class=“wx-nav”>
<view class=“iconfont icon-fangdajing”></view>
<text>小 猴 体 育</text>
<view class=“iconfont icon-shouye”></view>
</view>
这是一个视图(view)组件的代码块,其中包含了一个搜索图标、一个文本和一个首页图标,这可能是小猴体育微信小程序中的导航栏或标题栏的一部分。
最后是注释预处理指令的结束标记:
<!-- #endif -->
这个指令表示,下面的代码块是条件编译的结束,只在编译环境为微信小程序时才会生效。
通过这种方式,可以根据不同的编译环境,在同一个代码文件中编写适用于不同平台的代码,以实现更好的代码复用和适配性。在上述代码中,只有在编译环境为微信小程序时,包含视图组件的代码块才会被处理和展示。在其他编译环境下,这些代码块会被忽略或处理为其他内容。

完整代码

<template>
	<view class="home">
	<!-- #ifdef MP-WEIXIN -->
	<view class="wx-nav">
		<view class="iconfont icon-fangdajing left"></view>
		<text uni-title>小 猴 体 育</text>
		<view class="iconfont icon-shouye right"></view>
	</view>

		<view class="wx-content">
			<text>我是内容</text>
		</view>
	</view>
</template>

<script setup>
	
	import { reactive, ref } from 'vue'
	 const student=ref({
		 name:"后诚意",
		 age:18
	 })
	  const student1=reactive({
		 name:"后诚意",
		 age:18
	 })
	const count = ref(0)
	 var add=()=>{
		 console.log(student,student1)
		 // 可以发现使用ref包裹对象时候,底层调用reactive  但是不是很规范,从源码角度来看的话,在ref中传入一个对象的话,那么最后还是要通过reactive的方式去实现相关的源码。
		 console.log(count)
		 console.log("改之前的对象名字",student.value.name)
		 student.value.name="张国荣"
		 student1.name="李国均匀"
		 console.log("改之后的对象名字",student.value.name)
		 console.log("模板会自动解析.value ,所以模板操作时候",count,count.value)
	 }
	function increment() {
	  
	}
	
</script>

<style scoped lang="scss">
.home{
	.wx-nav{
		border-bottom: solid 1rpx #707070;
		background-color:#FFFFFF ;
		
		.left{
			margin-left: 30rpx;
		}
		.right{
			margin-right: 30rpx;
		}
		
		padding-bottom: 10rpx;
		margin-top: 80rpx;
		// 没写具体的高 差不多和底部导航栏一样·高合适
		height: 50rpx;
		        width: 100%;
		display: flex;
		justify-content: space-between;
		text-align: center;
		
	}
}

	
</style>

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

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

相关文章

SQLAlchemy快速使用

一、介绍 sqlalchemy是一个基于python实现的orm框架&#xff0c;跟web框架无关&#xff0c;独立的。 同步orm框架&#xff1a;django的orm&#xff08;3.0以后支持异步&#xff09;、sqlalchemy&#xff08;大而重&#xff09;、peewee&#xff08;小而轻、同步和异步&#xf…

Netty 粘包半包

什么是 TCP 粘包半包&#xff1f; 假设客户端分别发送了两个数据包 D1 和 D2 给服务端&#xff0c;由于服务端一次读取到的字节 数是不确定的&#xff0c;故可能存在以下 4 种情况。 &#xff08;1&#xff09;服务端分两次读取到了两个独立的数据包&#xff0c;分别…

MyBatis查询数据库之一(概念+创建项目+基础交互)

目录 1.MyBatis是什么&#xff1f; 2.为什么学习MyBatis&#xff1f; 3. 怎么学 MyBatis 4.第⼀个MyBatis查询 4.1 添加MyBatis框架支持 4.1.1老项目添加MyBatis 4.1.2 新项目添加MyBatis 4.2 配置连接字符串和MyBatis 4.2.1 配置连接字符串 4.2.2 配置 MyBatis 中的…

python爬虫之scrapy框架介绍

一、Scrapy框架简介 Scrapy 是一个开源的 Python 库和框架&#xff0c;用于从网站上提取数据。它为自从网站爬取数据而设计&#xff0c;也可以用于数据挖掘和信息处理。Scrapy 可以从互联网上自动爬取数据&#xff0c;并将其存储在本地或在 Internet 上进行处理。Scrapy 的目标…

谈谈基因编辑技术

目录 1.基因编辑的概念 2.基因编辑技术的发展 3.基因编辑技术给人类带来的福利 1.基因编辑的概念 基因编辑是指通过人为干预&#xff0c;对生物个体的基因组进行特定的修改。这种技术使得科学家能够直接改变生物体的遗传信息&#xff0c;包括添加、删除或修改特定基因的DNA序…

为什么你一定要学会写作?

不管是写文章还是做短视频&#xff0c;也就是现在的自媒体&#xff0c;都有一个很大的好处&#xff1a; 写作是把自己的同一段时间重复销售很多很多次的极少选择之一&#xff0c;也是相对来看最容易成为普通人起步的台阶之一。 你写一篇文章&#xff0c;可能花了半天时间&…

uniapp点击图片放大预览

阐述 有些时候我们在用uniapp显示图片时&#xff0c;有的不宜全部显示到屏幕上&#xff0c;uniapp提供了一个非常好用的api。 实现方式如下&#xff1a; <template><view class"content"><image class"logo" src"/static/images/a.…

移动开发最佳实践:为 Android 和 iOS 构建成功应用的策略

您可以将本文作为指南&#xff0c;确保您的应用程序符合可行的最重要标准。请注意&#xff0c;这份清单远非详尽无遗&#xff1b;您可以加以利用&#xff0c;并添加一些自己的见解。 了解您的目标受众 要制作一个成功的应用程序&#xff0c;你需要了解你是为谁制作的。从创建…

Scala编程语言入门教程

Scala教程 方便个人学习和查阅 学习目标 Scala介绍 简介 Scala创始人Martin Odersky马丁奥德斯基 再回到我们的scala语言&#xff0c;在Scala官网https://www.scala-lang.org/介绍了其六大特征。 Java和scala可以混编 类型推测(自动推测类型) 并发和分布式&#xff08;Ac…

OLED透明屏采购指南:如何选择适合您需求的高品质产品

引言&#xff1a;OLED透明屏作为一种创新的显示技术&#xff0c;正在迅速发展并广泛应用于各个领域。 然而&#xff0c;面对市场上琳琅满目的OLED透明屏产品&#xff0c;如何选择适合自己需求的高品质产品成为了采购者们的重要任务。 对此&#xff0c;尼伽将为您提供一份OLED…

mybatis-plus的update方法,到底会不会更新null值?看这一篇就够了

普通的设置值。需要传入一个Wrapper对象 默认情况下是不会更新null值的&#xff0c;也就是只更新设置值的字段 LambdaUpdateWrapper<OrderChildRoom> orderChildRoomUpdateWrapper new LambdaUpdateWrapper<>();orderChildRoomUpdateWrapper.set(OrderChildRoo…

基于SqlSugar的开发框架循序渐进介绍- 基于MongoDB的数据库操作整合

SqlSugar的开发框架本身主要是基于常规关系型数据库设计的框架&#xff0c;支持多种数据库类型的接入&#xff0c;如SqlServer、MySQL、Oracle、PostgreSQL、SQLite等数据库&#xff0c;非关系型数据库的MongoDB数据库也可以作为扩展整合到开发框架里面&#xff0c;通过基类的继…

SPI通信协议

简介 SPI有主、从两种模式&#xff0c;通常由一个主模块和一个或多个从模块组成&#xff08;SPI不支持多主机&#xff09;&#xff0c;主 模块选择一个从模块进行同步通信&#xff0c;从而完成数据的交换。提供时钟的为主设备&#xff08;Master&#xff09;&#xff0c;接 收时…

AlamLinux 9 显示最小化按钮

AlamLinux 9 显示最小化按钮 默认情况下&#xff0c;AlamLinux 9 是没有最小化按钮的&#xff0c;在操作上会影响我们的工作效率。 想加上最小化按钮也非常简单&#xff0c;1行命令就能解决。 gsettings set org.gnome.desktop.wm.preferences button-layout ":minimize…

<dependency> idea中为什么这个变黄色

在IDE中&#xff0c;当你的代码出现黄色高亮时&#xff0c;通常表示存在警告或建议的提示。对于Maven的<dependency>标签来说&#xff0c;黄色高亮可能有以下几种原因&#xff1a; 依赖项未找到&#xff1a;黄色高亮可能表示IDE无法找到指定的依赖项。这可能是由于配置错…

Android中级——RemoteView

RemoteView RemoteView的应用NotificationWidgetPendingIntent RemoteViews内部机制模拟RemoteViews RemoteView的应用 Notification 如下开启一个系统的通知栏&#xff0c;点击后跳转到某网页 public class MainActivity extends AppCompatActivity {private static final …

面试热题(翻转k个链表)

给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内部的值&a…

无涯教程-Lua - Modules(模块)

模块就像可以使用 require 加载的库&#xff0c;并且具有包含Table的单个全局名称&#xff0c;该模块可以包含许多函数和变量。 Lua 模块 其中一些模块示例如下。 -- Assuming we have a module printFormatter -- Also printFormatter has a funtion simpleFormat(arg) -- …

Godot 4 练习 - 制作粒子

演示项目dodge_the_creeps中&#xff0c;有一个Trail&#xff0c;具体运行效果 想要看看咋实现的&#xff0c;看完也不清晰&#xff0c;感觉是要设置某些关键的属性 ChatGPT说&#xff1a;以下是一些重要的属性&#xff1a; texture&#xff1a;用于渲染粒子的纹理。您可以使用…

迅为全国产龙芯3A5000电脑运行统信UOS、银河麒麟、loongnix系统

iTOP-3A5000开发板采用全国产龙芯3A5000处理器&#xff0c;基于龙芯自主指令系统 (LoongArch) 的LA464微结构&#xff0c;并进一步提升频率&#xff0c;降低功耗&#xff0c;优化性能。在与龙芯3A4000处理器保持引脚兼容的基础上&#xff0c;频率提升至2.5GHZ&#xff0c;功耗降…