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 (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...
随机推荐
- java并发编程(2):Java多线程-java.util.concurrent高级工具
高级多线程控制类 Java1.5提供了一个非常高效实用的多线程包:java.util.concurrent, 提供了大量高级工具,可以帮助开发者编写高效.易维护.结构清晰的Java多线程程序. Thr ...
- Python | __init__.py的神奇用法
0._init_.py 在Python工程里,当python检测到一个目录下存在_init_.py文件时,python就会把它当成一个模块(module).Module跟C++的命名空间和Java的P ...
- 基于阿里云 Serverless 快速部署 function 的极致体验
1.Serverless 前世今生 1.1 Serverless 背景介绍 云计算的不断发展,涌现出很多改变传统IT架构和运维方式的新技术,而以虚拟机.容器.微服务为代表的技术更是在各个层面不断提升云 ...
- 拥抱开放,Serverless 时代的下一征程
Serverless 作为云计算的最佳实践和未来演进趋势,其全托管免运维的使用体验和按量付费的成本优势使得它在云原生时代备受推崇.Serverless 的使用场景也由事件驱动,数据处理等部分特定场景转 ...
- 【调试】netconsole的使用
开发环境 客户端 开发板:FireFly-RK3399 Linux 4.4 IP:192.168.137.110 服务端 VMware Workstation Pro16,ubuntu 18.04 I ...
- 《3D编程模式》写书记录
本书介绍 本书罗列了我从自己的实战项目中提炼出来的关于3D编程(主要包括"3D引擎/游戏引擎"."编辑器"开发)的各种编程模式 所有的写书记录 <3D编程 ...
- Vue中使用el-menu高亮显示问题
https://blog.csdn.net/weixin_43336525/article/details/132541500 <template> <el-menu :defaul ...
- [转帖]查询 HTTPS 网站 TLS 版本
参考 检查网站的TLS版本 – wentao's blog Linux curl 命令详解 - 腾讯云开发者社区-腾讯云 TLS 版本查询_天泽岁月的博客-CSDN博客_查看tls版本 使用 Open ...
- [转帖]等待事件 enq:TX - row lock contention分析与解决
6月30日,数据库发生了大量锁表.大概持续1小时,并且越锁越多.后来通过业务人员停掉程序,并kill掉会话后解决. 几天后再EM上查看CPU占用: CPU发生了明显等待. 主要是由于enq:TX - ...
- [转帖]Shell三剑客之sed
目录 Shell三剑客 sed工具 sed 流编辑器的工作过程 sed命令格式与选项操作符 sed命令的常用选项 sed命令的打印功能 默认打印方式 sed命令的寻址打印 文本模式过滤行内容 sed的 ...