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 (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...
随机推荐
- DataLeap的全链路智能监控报警实践(一):常见问题
随着字节跳动业务的快速发展,大数据开发场景下需要运维管理的任务越来越多,然而普通的监控系统只支持配置相应任务的监控规则,已经不能完全满足当前需求,在日常运维中开发者经常会面临以下几个问题: 任务多,依 ...
- ECS 挂载 OSS 多Bucket
ECS 挂载 OSS,等同于在ECS 上使用内网的 Bucket 域名,不需要收取流量费用,减少接口代码的编写. CentOS系统 安装 wget http://gosspublic.alicdn.c ...
- Python 异步编程原理篇之新旧协程实现对比
协程的发展流程 再来回顾一下协程的发展流程: python2.5 为生成器引用.send()..throw()..close()方法 python3.3 为引入yield from,可以接收返回值,可 ...
- STM32CubeMX教程15 ADC - 多重ADC转换
1.准备材料 开发板(正点原子stm32f407探索者开发板V2.4) STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) ST-LINK ...
- 一个非常轻量级的 Web API Demo
一个非常轻量级的 Web API Demo,代码量很少,实现了方法拦截器,token校验,异常拦截器,缓存 创建项目:如果选择Web API,项目中东西会比较多,这里选择Empty,把下面的Web A ...
- AtCoder Beginner Contest 198 个人题解(AB水题,C思维,D思维+全排列,E题DFS搜索,F懵逼)
补题链接:Here A - Div 题意:N 个不一样的糖,请问有多少种分法给 A,B两人 水题,写几组情况就能知道输出 \(N - 1\) 即可 B - Palindrome with leadin ...
- vue <a>标签 href 是参数的情况下如何使用
想在页面中使用a标签打开一个新页面进行跳转 例如:msgZi.blogAddress 的值是 https://www.baidu.com 正确的写法: <a :href="goBlog ...
- 简易机器学习笔记(九)LeNet实例 - 在眼疾识别数据集iChallenge-PM上的应用
前言 上一节大概讲了一下LeNet的内容,这一章就直接来用,实际上用一下LeNet来进行训练和分类试试. 调用的数据集: https://aistudio.baidu.com/datasetdetai ...
- 去重N皇后
题目:将上下对称.左右对称棋局.主副对角线对称棋局和旋转后重复视为重复,则要求输出去重后的N皇后问题的棋盘布局 这道题是一道作业题,我都惊到了,一向弱智的作业题中竟然冒出一道这样的题,这题最起码橙黄之 ...
- 机器学习-决策树系列-XGBoost算法-chentianqi大神-集成学习-31
目录