顶部的图标只支持本地图片哈,所以你要将阿里巴巴上的图标下载到本地,

然后只要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 顶部配置搜索框和左右图标的更多相关文章

  1. Android商城开发系列(五)—— 商城首页回到顶部和搜索框布局实现

    今天我们来开发商城的首页[输入搜索框]布局和点击右下角图片回到顶部的效果 搜索功能在App中很常见,尤其是在商城类的项目当中,一般都会提供很强大的搜索功能,App的搜索布局一般都是在App的顶部,如下 ...

  2. Android actionbar 搜索框

    就是实如今顶部这种搜索框. 一.这个搜索框是actionbar上的menu上的一个item.叫SearchView.我们能够先在menu选项里定义好: bmap_menu.xml: <?xml ...

  3. Android 浮动搜索框 searchable 使用(转)。

    Android为程序的搜索功能提供了统一的搜索接口,search dialog和search widget,这里介绍search dialog使用.search dialog 只能为于activity ...

  4. 十七、Android学习笔记_Android 使用 搜索框

    1.在资源文件夹下创建xml文件夹,并创建一个searchable.xml: android:searchSuggestAuthorityshux属性的值跟实现SearchRecentSuggesti ...

  5. Android搜索框以及内容提供器

    先看结果: 相关的官方文档在这里:Creating a Search Interface Android官方提供了两种方式: 弹出一个Dialog,覆盖当前的Activity界面 在AppBar中扩展 ...

  6. 嵌入AppBar并且带搜索建议的搜索框(Android)

    先看结果: 相关的官方文档在这里:Creating a Search Interface Android官方提供了两种方式: 弹出一个Dialog,覆盖当前的Activity界面 在AppBar中扩展 ...

  7. 详细解读Android中的搜索框(二)—— Search Dialog

    Search Dialog是提供搜索的控件之一,还有一个是上次小例子给出的searchView,关于SearchView的东西后面会说到.本次先从Search Dialog说起,让大家慢慢理解andr ...

  8. iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)

    很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...

  9. Android学习笔记_79_ Android 使用 搜索框

    1.在资源文件夹下创建xml文件夹,并创建一个searchable.xml: android:searchSuggestAuthorityshux属性的值跟实现SearchRecentSuggesti ...

  10. uniapp自定义顶部搜索框兼容微信小程序

    zhuanzai:  uniapp自定义顶部搜索框兼容微信小程序 自定义组件 navbarvue (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...

随机推荐

  1. 云图说|初识云数据库GaussDB(for Redis)

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:云数据库Gauss ...

  2. Netty ChannelFuture 监听三种方法

    以下是伪代码 方法一 前后代码省略 //绑定服务器,该实例将提供有关IO操作的结果或状态的信息 ChannelFuture channelFuture = bootstrap.bind(); this ...

  3. 微服务网关 —— SpringCloud Netflix Zuul

    概述 Spring Cloud Zuul 是 Spring Cloud Netflix 子项目的核心组件之一,可以作为微服务架构中的 API 网关使用,有以下用途: 鉴权:对于访问每个服务的请求进行鉴 ...

  4. C++11实用特性2

    1 可调用对象包装器.绑定器 1可调用对象 C++中的可调用对象分为四类: 函数指针: 任何一个函数都可以抽象成一个函数指针 int print(int a, double b) { cout < ...

  5. wscat 命令报错

    使用wscat测试连接时报错: [root@kafka kafka-logs]# wscat ws://xxx.xxx.com/bs /usr/lib/node_modules/wscat/node_ ...

  6. 网传的Spring大漏洞

    昨天凌晨发了篇关于Spring大漏洞的推文,白天就有不少小伙伴问文章怎么删了. 主要是因为收到朋友提醒说可能发这个会违规(原因可参考:阿里云因发现Log4j2核弹级漏洞但未及时上报,被工信部处罚),所 ...

  7. 【AcWing】第6场周赛 B题 3734. 求和 (思维)

    AcWing 3734. 求和 其实这道题并不难,只是思维性很强! 因为 \(a\) 的各个数位不包含除了 \(4\) 和 \(7\)​ 以外的其他数字. 仔细观察数据会发现因为 \(1\le l \ ...

  8. vue路由模块化

    https://www.bilibili.com/video/BV1Tg411u7oy?from=search&seid=5098139115981575542&spm_id_from ...

  9. java项目实践-tomcat实现用户登录-day17

    目录 1. 安装 2. 初识tomcat 2. 创建tomcat项目 3. 启动之前 3. java jsp 4. Request Response对象的其他属性 5. 用户登录小功能 1. 安装 t ...

  10. [AGC058C] Planar Tree 题解

    前言 赛时没做出来,赛后把题补了.果然是 maroonrk 出的,名不虚传啊--真的很好的一道题目. 解法 题目中的圆周有以下几个性质: 圆周上如果有相邻的等值,我们可以去掉一个而不改变答案(这个很好 ...