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 (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...
随机推荐
- sqlalchemy union 联合查询
在最近的工作中遇到一个问题,要将两个字段相似的表里的数据统一起来展示在一个统计页面中.如果是单纯的展示数据那很简单,两个表查出来之后组合一下就完事了,但是有坑的地方就是分页和按照时间搜索,这两个功能决 ...
- python实现微信扫码支付
import datetime import hashlib import time import json import random import string import requests f ...
- 别再问我 2050 可以干什么,Make a Movie in a Day!
2050 的每个年青人都是新物种.越是不可能见面的人见了面,就越会有奇迹发生,2050 努力让年青人见上另一位年青人,激发新的创造力.一起来 2050 看看? 2050 是什么? 2050 大会是由阿 ...
- c中常用的字符串操作
c中常用的字符串操作 头文件:<string.h> 1.strchr()查找某字符在字符串中首次出现的位置 strchr() 用来查找某字符在字符串中首次出现的位置,其原型为: char ...
- ME21N 采购订单新增页签增强
1.实现效果 根据客制化需求,要在采购订单中新增大量字段,所以要在界面上添加一个单独的页签.效果如下: 2.增强实现 2.1.增强结构 因为是在抬头上边添加,所以增强CI_EKKODB结构 2.2.函 ...
- AtCoder Beginner Contest 211 (C ~ E) 个人题解
比赛链接:Here A.B题跳过 C - chokudai 题意: 给出一个字符串,问有多少个字串能构成 chokudai 这道题算是一个简单DP,只要计算某个位置对构成 chokudai 的贡献值即 ...
- 【每日一题】16.Treepath (LCA + DP)
补题链接:Here 题意总结:寻找有多少条两个点之间偶数路径 看完题,很容易想到在树型中,同一层的节点必然是偶数路径到达,还有就是每隔两层的节点一样可以到达,所以我就理所应当的写了如下代码 using ...
- 如何一键私有化部署 Laf ?
太长不看:Laf 上架了 Sealos 的模板市场,通过 Laf 应用模板即可一键部署! Laf 是一个完全开源的项目,除了使用公有云之外,还有大量的用户选择私有化部署 Laf.然而,私有化部署通常伴 ...
- 你做的 9 件事表明你不是专业的 Python 开发人员
本文转载自国外论坛 medium,原文地址: https://medium.com/navan-tech/7-java-features-you-might-not-have-heard-of-ade ...
- Kubernetes security context capability
注:以下内容基于经验主义,不一定对. Linux capability Linux 中,root 作为特权用户,具有执行所有应用的能力.而普通用户只能执行普通应用.如果普通用户需要执行特权应用,需要进 ...