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"
}
]
}

uni-app 顶部配置搜索框和左右图标的更多相关文章
- Android商城开发系列(五)—— 商城首页回到顶部和搜索框布局实现
今天我们来开发商城的首页[输入搜索框]布局和点击右下角图片回到顶部的效果 搜索功能在App中很常见,尤其是在商城类的项目当中,一般都会提供很强大的搜索功能,App的搜索布局一般都是在App的顶部,如下 ...
- Android actionbar 搜索框
就是实如今顶部这种搜索框. 一.这个搜索框是actionbar上的menu上的一个item.叫SearchView.我们能够先在menu选项里定义好: bmap_menu.xml: <?xml ...
- Android 浮动搜索框 searchable 使用(转)。
Android为程序的搜索功能提供了统一的搜索接口,search dialog和search widget,这里介绍search dialog使用.search dialog 只能为于activity ...
- 十七、Android学习笔记_Android 使用 搜索框
1.在资源文件夹下创建xml文件夹,并创建一个searchable.xml: android:searchSuggestAuthorityshux属性的值跟实现SearchRecentSuggesti ...
- Android搜索框以及内容提供器
先看结果: 相关的官方文档在这里:Creating a Search Interface Android官方提供了两种方式: 弹出一个Dialog,覆盖当前的Activity界面 在AppBar中扩展 ...
- 嵌入AppBar并且带搜索建议的搜索框(Android)
先看结果: 相关的官方文档在这里:Creating a Search Interface Android官方提供了两种方式: 弹出一个Dialog,覆盖当前的Activity界面 在AppBar中扩展 ...
- 详细解读Android中的搜索框(二)—— Search Dialog
Search Dialog是提供搜索的控件之一,还有一个是上次小例子给出的searchView,关于SearchView的东西后面会说到.本次先从Search Dialog说起,让大家慢慢理解andr ...
- iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
- Android学习笔记_79_ Android 使用 搜索框
1.在资源文件夹下创建xml文件夹,并创建一个searchable.xml: android:searchSuggestAuthorityshux属性的值跟实现SearchRecentSuggesti ...
- uniapp自定义顶部搜索框兼容微信小程序
zhuanzai: uniapp自定义顶部搜索框兼容微信小程序 自定义组件 navbarvue (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...
随机推荐
- 教你如何在Spark Scala/Java应用中调用Python脚本
摘要:本文将介绍如何在 Spark scala 程序中调用 Python 脚本,Spark java程序调用的过程也大体相同. 本文分享自华为云社区<[Spark]如何在Spark Scala/ ...
- 非root安装Anaconda
1.下载对应版本的Anaconda (wget+路径) 下载地址:https://repo.anaconda.com/archive/ 或者清华镜像:https://mirrors.tuna.tsin ...
- 火山引擎 DataLeap 助你拥有 Notebook 交互式的开发体验
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Notebook 是一种支持 REPL 模式的开发环境.所谓「REPL」,即「读取-求值-输出」循环:输入一段 ...
- 火山引擎 VeDI 推出这款产品 助力企业实现以“人”为中心的数据洞察
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 CDP(Customer Data Platform,客户数据平台)市场将迎来新一轮的高速增长. 国际数据公司(以 ...
- 面试官:分库分表后如何生成全局ID?
分库分表后就不能使用自增 ID 来作为表的主键了,因为数据库自增 ID 只适用于单机环境,但如果是分布式环境,是将数据库进行分库.分表或数据库分片等操作时,那么数据库自增 ID 就会生成重复 ID,从 ...
- Java ElasticSearch 操作
pom 文件中添加: <dependency> <groupId>org.elasticsearch.client</groupId> <artifactId ...
- var _ I = (*T)(nil)
学习的时候看到这样一行代码 var _ Codec = (*GobCodec)(nil) 查了一下后,得到该语句的作用为:检查GobCodec这个结构体是否实现了Codec这个接口 空白标识符_代表变 ...
- Serverless 应用托管助力企业加速创新
作者: 熊峰 | 阿里云技术专家 云原生时代的 Serverless 应用托管架构 回顾过去十年,数字化转型将科技创新与商业元素不断融合.重构,重新定义了新业态下的增长极.商业正在从大工业时代的固化范 ...
- 【有奖体验】叮!你有一张 3D 卡通头像请查收
立即体验基于函数计算部署[图生图]一键部署3D卡通风格模型: https://developer.aliyun.com/topic/aigc_fc 人工智能生成内容(Artificial Intell ...
- python连接liunx主机:paramiko类基本操作
一.下载paramiko类 pip install paramiko 二.实现过程 # coding utf-8# author:Mr.white import paramiko # 创建SSHCli ...