uni-app 顶部配置搜索框和左右图标

顶部的图标只支持本地图片哈,所以你要将阿里巴巴上的图标下载到本地,
然后只要XXX.ttf这个文件就行了 然后放在static这个文件中
在pages.json中fontSrc进行引入。
text:使用unicode编码的时候,必须是\u开头哈。
配置时,层级不要写错了;否则就是现实不出来哈!
我因为层级写错 整了好久了。

代码如下 在pages.json文件的配置哈

// 搜索配置
		"titleNView":{
			"searchInput":{
				"align":"center",
				"backgroundColor":"#ccc",
				"borderRadius":"4px",
				"placeholder":"搜索大全",
				"placeholderColor":"#fff",
				"disabled":false
			},
			// 左右按钮配置
			"buttons":[
				// 左边
				{
					"color":"#ff9619", // 图标默认展时的颜色哈、
					"colorPressed":"pink",  //图标按下的时候的颜色哈
					"float":"left",
					"fontSize":"30px",//按钮上文字的大小
					"fontSrc":"/static/font/iconfont.ttf", //按钮的图片来源哈
					"text":"\ue63f"  //按钮的unicode代码
					
				},
				// 右边
				{
					"color":"#000000",
					"colorPressed":"pink",
					"float":"right",
					"fontSize":"30px",//按钮上文字的大小
				    "fontSrc":"/static/font/iconfont.ttf",
					"text":"\ue63f"
			
				}
			]
		}

posted @   南风晚来晚相识  阅读(3579)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示