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目录
在这里插入图片描述
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/61117.html

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

相关文章

【Linux】【docker】安装sonarQube免费社区版9.9

文章目录 ⛺sonarQube 镜像容器⛺Linux 安装镜像&#x1f341;出现 Permission denied的异常&#x1f341;安装sonarQube 中文包&#x1f341;重启服务 ⛺代码上传到sonarQube扫描&#x1f341;java语言配置&#x1f341;配置 JS TS Php Go Python⛏️出现异常sonar-scanner.ba…

观察者模式(C++)

定义 定义对象间的一种一对多(变化)的依赖关系&#xff0c;以便当一个对象(Subject)的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并自动更新。 ——《设计模式》GoF 使用场景 一个对象&#xff08;目标对象&#xff09;的状态发生改变&#xff0c;所有的依赖对…

ruoyi-cloud-notes01

1、Maven中的dependencyManagement Maven中的dependencyManagement元素提供了一种管理依赖版本号的方式。在dependencyManagement元素中声明所依赖的jar包的版本号等信息&#xff0c;那么所有子项目再次引入此依赖jar包时则无需显式的列出版本号。Maven会沿着父子层级向上寻找…

Spring-1-透彻理解Spring XML的Bean创建--IOC

学习目标 上一篇文章我们介绍了什么是Spring,以及Spring的一些核心概念&#xff0c;并且快速快发一个Spring项目&#xff0c;实现IOC和DI&#xff0c;今天具体来讲解IOC 能够说出IOC的基础配置和Bean作用域 了解Bean的生命周期 能够说出Bean的实例化方式 一、Bean的基础配置 …

VBA技术资料MF38:VBA_在Excel中隐藏公式

【分享成果&#xff0c;随喜正能量】佛祖也无能为力的四件事&#xff1a;第一&#xff0c;因果不可改&#xff0c;自因自果&#xff0c;别人是代替不了的&#xff1b;第二&#xff0c;智慧不可赐&#xff0c;任何人要开智慧&#xff0c;离不开自身的磨练&#xff1b;第三&#…

Mr. Cappuccino的第56杯咖啡——Mybatis拦截器

Mybatis拦截器 概述应用场景项目结构实现分页查询其它拦截器的使用 概述 Mybatis允许使用者在映射语句执行过程中的某一些指定的节点进行拦截调用&#xff0c;通过织入拦截器&#xff0c;在不同节点修改一些执行过程中的关键属性&#xff0c;从而影响SQL的生成、执行和返回结果…

【计算机视觉|语音分离】期望在嘈杂环境中聆听:一个用于语音分离的不依赖于讲话者的“音频-视觉模型”

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Looking to Listen at the Cocktail Party: A Speaker-Independent Audio-Visual Model for Speech Separation 链接&#xff1a;Looking to listen at the cocktail party: a speaker-in…

人工智能学习1——特征提取和距离

强人工智能和弱人工智能&#xff1a; 强人工智能&#xff1a;和人脑一样 弱人工智能&#xff1a;不一定和人脑思考方式一样&#xff0c;但是可以达到相同的效果&#xff0c;弱人工智能并不弱 —————————————————————————————————— 机器学习能…

2023年电赛---运动目标控制与自动追踪系统(E题)OpenMV方案

前言 &#xff08;1&#xff09;废话少说&#xff0c;很多人可能无法访问GitHub&#xff0c;所以我直接贴出可能要用的代码。此博客还会进行更新&#xff0c;先贴教程和代码 &#xff08;2&#xff09; <1>视频教程&#xff1a; https://singtown.com/learn/49603/ <2…

自己实现Linux 的 cp指令

cp指令 Linux的cp指令就是复制文件&#xff1a; cp: 拷贝(cp 拷贝的文件 要拷贝到的地址或文件)&#xff0c;cp b.c test.c 将b.c拷成test.c的一个新文件 Linux 系统初识_mjmmm的博客-CSDN博客 实现思路 打开源文件读文件内容到缓冲区创建新文件将读到的文件内容全部写入新文…

在家下载Springer、IEEE、ScienceDirect等数据库论文的论文下载工具

Springer、IEEE、ScienceDirec数据库是我们查找外文文献常用数据库&#xff0c;当我们没有数据库使用权限的时该如何下载这些数据库的学术论文呢&#xff1f;下面就讲解一下在家下载数据库学术文献的论文下载工具。 一、查找下载外文文献&#xff0c;我们可以谷歌学术检索&…

LeetCode-Java(05)

19. 删除链表的倒数第 N 个结点 两个方法&#xff0c;方法一是先走一遍链表得出链表长度&#xff0c;再走第二遍&#xff0c;找到倒数第n个数。方法二是双指针&#xff0c;首先快指针就比慢指针多走n步&#xff0c;然后这俩指针同步走&#xff0c;快指针走到头了&#xff0c;慢…

python-Excel数据模型文档转为MySQL数据库建表语句(需要连接数据库)-工作小记

将指定Excel文档转为create table 建表语句。该脚本适用于单一且简单的建表语句 呈现效果 代码 # -*- coding:utf-8 -*- # Time : 2023/8/2 17:50 # Author: 水兵没月 # File : excel_2_mysql建表语句.py import reimport pandas as pd import mysql.connectordb 库名mydb m…

List集合的对象传输的两种方式

说明&#xff1a;在一些特定的情况&#xff0c;我们需要把对象中的List集合属性存入到数据库中&#xff0c;之后把该字段取出来转为List集合的对象使用&#xff08;如下图&#xff09; 自定义对象 public class User implements Serializable {/*** ID*/private Integer id;/*…

python编写小程序有界面,python编写小程序的运行

大家好&#xff0c;小编为大家解答python编写小程序怎么看代码的的问题。很多人还不知道python编写小程序的运行&#xff0c;现在让我们一起来看看吧&#xff01; Python第一个简单的小游戏 temp input("请猜一猜姐姐的幸运数字是&#xff1a; ") guess int(temp) …

蓝桥杯上岸每日N题 第八期 (全球变暖)!!!

蓝桥杯上岸每日N题第八期(全球变暖)&#xff01;&#xff01;&#xff01; 同步收录 &#x1f447; 蓝桥杯上岸必背&#xff01;&#xff01;&#xff01;(第五期BFS) 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &am…

Python(六十八)元组的创建方式

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

.Net6 Web Core API 配置 Autofac 封装 --- 依赖注入

目录 一、NuGet 包导入 二、Autofac 封装类 三、Autofac 使用 四、案例测试 下列封装 采取程序集注入方法, 单个依赖注入, 也适用, 可<依赖注入>的地方配置 一、NuGet 包导入 Autofac Autofac.Extensions.DependencyInjection Autofac.Extras.DynamicProxy 二、Auto…

AIDL与HIDL核心概念

目录 一. 概述 二. 核心流程的核心理解 三. 一些术语 四. 参考样例 一. 概述 AIDL和HIDL都是主要用于跨进程通信&#xff0c;本质是Binder通信。 总体流程都是先写.aidl文件或.hal文件&#xff0c;这个文件只有接口定义哦不是实现&#xff0c;然后利用工具自动生成代码&a…

kafka 理论知识

1 首先要了解kafka是什么 Kafka是一个分布式的消息订阅系统 1.1 kafka存储消息的过程 消息被持久化到一个topic中&#xff0c;topic是按照“主题名-分区”存储的&#xff0c;一个topic可以分为多个partition&#xff0c;在parition(分区)内的每条消息都有一个有序的id号&am…