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

1.  pages.json配置

代码:

"path": "pages/index/index",
            "style": {
                "app-plus": {
                    "scrollIndicator": "none", //隐藏滚动条
                    "titleNView": {
                        // 搜索框配置
                        "searchInput": {
                            "align": "center",               //搜索框中文字居中
                            "backgroundColor": "#F7F7F7",
                            "borderRadius": "4px",
                            "placeholder": "搜索糗事",
                            "placeholderColor": "#CCCCCC",   //搜索框内预定义文字的颜色
                            "disabled": true                 //先不启用
                        },
                        //配置按钮
                        "buttons": [
                            // 左边
                            {
                                "color": "#FF9619",
                                "colorPressed": "#BBBBBB",
                                "float": "left",             //浮动在左边
                                "fontSize": "22px",          //icon的大小,注意是px
                                "fontSrc": "/static/font/icon.ttf",
                                "text": "\ue609"             //注意写法
                            },
                            // 右边                         
                            {
                                "color": "#000000",
                                "colorPressed": "#BBBBBB",
                                "float": "right",           //浮动在右边
                                "fontSize": "22px",
                                "fontSrc": "/static/font/icon.ttf",
                                "text": "\ue653"            //注意写法
                            }
                        ]
                    }
                }
            }

2. 图标说明

3. 最终效果

原文地址:https://www.cnblogs.com/luwei0915/p/12549201.html

时间: 2024-10-15 21:38:52

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

如何在html添加一个搜索框和一个按钮?

<INPUT TYPE="text" id="k"><INPUT TYPE="button" VALUE="ok" ONCLICK="xx()">   <SCRIPT LANGUAGE="JavaScript">   <!--   function xx(){ var k=document.getElementById("k"

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

效果描述:当下拉的时候渐变产生对固定的搜索框 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

站长工具|百度搜索框提示功能

百度向站长开放免费“百度搜索框”代码和“百度搜索框提示”代码.只需进行简单的设置, 即可将“ 百度搜索框( 带提示功能)”功能快速加入到您的网页中.提升用户在网站中的搜索体验. 根据不同类型的网站需求,站长工具一共提供三种引入方式供您选择: 简单方式——方便的将“百度搜索框(带提示功能)”直接加入到您的网页中.将以下代码加入到您的网页中,即可获得带有“搜索框提示”功能的百度搜索框 HTML代码: <form action=”http://www.baidu.com/baidu” target=”

android浮动搜索框的使用

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

使用jQuery-UI来实现一个Ajax的自动完成功能(自动填充搜索框的下拉值)

首先你要在.net拓展包中去搜索  jquery ui (Combined Libray)安装这么个文件 第二部   在控制器中添加我们根据输入搜索框的值获取符合的记录集的action 第三步  有了数据集,就该去画我们的页面了 第四步  修改我们的js文件 具体效果就是这样的 如图:(不知道为什么我的ui样式有点丑) 但是这样 还需要选择某一项,再点击搜索,很繁琐的...我们想实现选中之后 直接得到搜索页 第五步  再次修改我们的js文件 这样就实现了你一选,然后就出现了搜索结果,一步到位.

IOS自定义搜索框

如果只是在某个地方添加一个自定义的搜索框,只需要添加以下代码: //创建搜索框对象 UITextField *searchBar=[[UITextField alloc] init]; searchBar.width=300; searchBar.height=30; searchBar.font=[UIFont systemFontofSize:15]; [email protected]"请输入搜索框"; searchBar.backgroud=[UIImage imageName

uni-app 顶部配置搜索框和左右图标

顶部的图标只支持本地图片哈,所以你要将阿里巴巴上的图标下载到本地, 然后只要XXX.ttf这个文件就行了 然后放在static这个文件中 在pages.json中fontSrc进行引入. text:使用unicode编码的时候,必须是\u开头哈. 配置时,层级不要写错了:否则就是现实不出来哈! 我因为层级写错 整了好久了. 代码如下 在pages.json文件的配置哈 // 搜索配置 "titleNView":{ "searchInput":{ "alig

.NET Core类库项目中如何读取appsettings.json中的配置

这是一位朋友问我的问题,写篇随笔回答一下.有2种方法,一种叫丑陋的方法 —— IConfiguration ,一种叫优雅的方法 —— IOptions . 1)先看丑陋的方法 比如在 RedisClient 中需要读取 appsettings.json 中的 redis 连接字符串: { "redis": { "ConnectionString": "xxx" } } 需要在 RedisClient 的构造函数参数中添加 IConfigurati

es6转码和package.json中的配置

在线实时转换 需要babel-register .babelrc中: { "presets": [ "es2015" ] } 项目中main.js配置: 前提是安装对应的包 require('babel-register') require('./src/app') 自己写的要运行的为app.js,这样配置后会在运行main.js是自动转为es5并执行 通过配置手动转换 需要babel-cli 安装babel后 运行babel src -d dist src为自己写