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"

                }
            ]
        }

原文地址:https://www.cnblogs.com/IwishIcould/p/12184419.html

时间: 2024-10-14 11:50:32

uni-app 顶部配置搜索框和左右图标的相关文章

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

1.在资源文件夹下创建xml文件夹,并创建一个searchable.xml: android:searchSuggestAuthorityshux属性的值跟实现SearchRecentSuggestionsProvider类中的setupSuggestions方法的第一个参数相同.android:searchSuggestSelection 指搜索参数 <?xml version="1.0" encoding="utf-8"?> <searchab

android浮动搜索框的使用

引言 在我们的应用程序中经常需要提供搜索服务,比如搜索联系人, 搜索商品信息等等.我们可以自己在布局中自定义我们的搜索框,实现我们的搜索逻辑.但是还有一种更简单的方法:使用android系统给我们提供的搜索功能框架. 在android中,提供两种实现搜索功能的方式:search dialog 和 searchView. search dialog类似于普通的dialog,悬浮于我们的窗体之上.示例图如下: searchView通常被嵌套在我们的布局之中,最典型的案例就是在actionBar中使用

模仿Airbnb的悬浮搜索框动画

观察Airbnb搜索框动画的原理 先看看airbnb的效果把. 看了几遍,发现是这么一个原理: 最初搜索框是展开的 稍微向下滑动一点,搜索框收起 当搜索框已经收起后再向下滑,搜索框一直保持收起状态 在向上滑动时,只有滑动到顶部,搜索框才展开 探索实现方法 觉得这个搜索框的展开与收起跟顶部有着很大的关系,到达顶部才会展开,离开顶部就收起. 查阅Api发现,Listview OnScrollListener onScroll中有这几个参数: /** * Callback method to be i

SharePoint 2013实例1&mdash;构建三层服务器场9&mdash;配置搜索服务器

这节我们来配置搜索服务器,如下图标红处. 1.搜索架构 首先,我们进入搜索管理,确认下现在的搜索服务器组件的构成情况. 点击默认的搜索应用程序 在搜索管理中,发现应用服务器APP01承担了所有6个搜索组件的功能. 关于搜索架构中6个组件的关系和作用可参见如下图: 现在由一个服务器APP01承担所有搜索组件服务,如下图 目标是变为3个应用服务器分担搜索组件,其中搜索专用服务器srv-sch01承担搜索核心服务. 2.搜索服务器安装. 之前已经安装了4台SPS服务器了,搜索服务器安装这里就不赘述了.

04_pages.json中首页style配置(顶部搜索框及左右按钮配置)

1.  pages.json配置 代码: "path": "pages/index/index",            "style": {                "app-plus": {                    "scrollIndicator": "none", //隐藏滚动条                    "titleNView"

饿了么 顶部搜索框下拉动画小效果

效果描述:当下拉的时候渐变产生对固定的搜索框 import React, { Component } from "react"; import { connect } from "react-redux"; import { Container, Header, Title, Content, Button, Icon, Left, Right, Body, FlatList, } from "native-base"; import { Dim

Android actionbar 搜索框

就是实现在顶部这样的搜索框. 一.这个搜索框是actionbar上的menu上的一个item.叫SearchView.我们可以先在menu选项里定义好: bmap_menu.xml: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item androi

Xamarin Android 的搜索框 : Search Dialog

Android 的搜索有两种可用方式: Search Dialog它是一个 UI Component , 被激活的时候, 会在顶部显示一个浮动的搜索框. SearchView  可以被布局到任何地方.在 Android 3.0 (Level 11) 中提供. SearchView 简单,随意使用,这里主要说说 Search Dialog  的基本用法, 因为 Xamarin 的处理方式稍稍和 原生 Android 有些不同. 效果: 源码: https://github.com/gruan01/

Android零基础入门第62节:搜索框组件SearchView

原文:Android零基础入门第62节:搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当用户输入完成后提交搜索时,也可通过监听器执行实际的搜索. SearchView默认是展示一个search的icon,点击icon展开搜索框,也可以自己设定图标.用SearchView时可指定如下表所示的常见XML属性及相关方法. 如果为SearchView增加一个配套的ListView,则可以为Se