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

然后只要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. selenium 开源UI测试工具

    简介 selenium是一个用于Web应用程序测试的工具.selenium测试直接运行于浏览器网页上,可以模拟用户操作网页.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Fi ...

  2. Ansible--批量创建lvm

    --- - hosts: all tasks: - block: - name: 创建1000M的逻辑卷lv1 lvol: vg: vg0 lv: lv1 size: 1000 - name: 逻辑卷 ...

  3. BOM批量查询

     1业务要求 1.当多层展开时: 根据"BOM应用程序"字段CAPID在TC04中取出"选择ID"TC04-CSLID: 再根据TCS41-CSLID= TC0 ...

  4. 使用nginx代理emqx的TCP、WS、WSS连接请求

    项目代理关系: 注:主机上已存在名为:nginx-proxy 的一级 nginx 的代理,将监听了主机的 80.443端口 docker-compose.yml version: "3.7& ...

  5. Spring Cloud 和 Dubbo 哪个会被淘汰?

    今天在知乎上看到了这样一个问题:Spring Cloud 和 Dubbo哪个会被淘汰?看了几个回答,都觉得不在点子上,所以要么就干脆写篇小文瞎逼叨一下. 简单说说个人观点 我认为这两个框架大概率会长期 ...

  6. iview upload 上传文件样例

    iview upload 组件官网上给出的用法是,选择附件后就立马上传附件.我不想让他立马上传,我想让他和其他一些信息一起上传,百度查了一些资料照大神总结的例子实现了现在分享一下. <Uploa ...

  7. 三、swift大对象--动态大对象

    系列导航 一.swift对象存储环境搭建 二.swift添加存储策略 三.swift大对象--动态大对象 四.swift大对象--静态态大对象 五.java操作swift对象存储(官网样例) 六.ja ...

  8. 使用JSEncrypt加密解密

    最近项目中使用非对称加密JSEncrypt. uni-app中先安装第三方npm包jsencrypt util文件夹下新建一个jsencrypt.js文件 1 import JSEncrypt fro ...

  9. 开发人员常用Docker指令

    什么是 Docker? Docker 是一个开源的容器化平台,用于构建.打包和运行应用程序.它允许开发者将应用程序及其依赖项打包成一个独立的可移植容器,可以在任何环境中运行,无论是开发环境.测试环境还 ...

  10. AHB to Sram设计

    规格说明 现在要对addr1进行操作(原addr1中存储的数据为data),现在需要写入data1,下一拍对addr1进行读操作,需要读出data1(读出最新的数据data1,而不是data),这时候 ...