uni-app实现顶部导航栏显示按钮+搜索框

迈不过友情╰ 2024-04-18 12:41 61阅读 0赞

{
    		   "path" : "pages/index/index", /* 首页*/
    		   "style" : {
    				"navigationBarTitleText" : "首页",
    				"navigationBarBackgroundColor": "#179E97",
    				"enablePullDownRefresh" : false ,//开启下拉刷新,
    				"app-plus": {
    					"bounce": "none",
    					"titleNView": {
    						"buttons": [ 
    							{
    								"text": "十三村", 
    								"fontSize":"16",
    								"float": "left",
    								"color":"#fff",
    								"width":"60px",
    								"select":true
    							},
    							{
    								"text" : "\ue609",
    								"fontSize":"16",
    								"fontSrc":"/static/iconfont.ttf",
    								"float": "right",
    								"color":"#fff"
    							},
    							{
    								"text" : "\ue660",
    								"fontSize":"16",
    								"fontSrc":"/static/iconfont.ttf",
    								"float": "right",
    								"color":"#fff"
    							}
    						],
    						"searchInput":{
    								"align": "center",
    								"placeholder": "公益相亲会",
    								"borderRadius":"50upx",
    								"backgroundColor": "#008B84",
    								"placeholderColor":"#FFFFFF"
    							}
    					}
    				}
    		   }
    		}

![在这里插入图片描述][20190906182124464.png]

[20190906182124464.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a3f53584b058455488e2bdcc3c90854a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app实现顶部导航栏显示按钮+搜索框

{ "path" : "pages/index/index", /* 首页*/ "style" : { "nav...

迈不过友情╰/ 2024年04月18日 12:41/ 0 赞/ 62 阅读

相关 uniapp添加顶部导航栏并且使用iconfont图标

一、在阿里矢量图选择自己喜欢的图标，然后点击收藏二、右上角下载全部已经收藏了的图标代码三、在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到项目stat

短命女/ 2023年10月04日 19:09/ 0 赞/ 75 阅读

相关 uniapp 顶部的原生导航栏设置下边框

pages.json中，设置app-plus { "path" : "pages/login/login", "style" :

小灰灰/ 2023年06月15日 04:59/ 0 赞/ 17 阅读

相关 uni-app自定义导航栏搜索框显示接收参数

if("undefined" != typeof this.$route.query.keyword){ this.$refs['search'].show

墨蓝/ 2022年11月22日 10:24/ 0 赞/ 200 阅读

相关 uniapp返回顶部按钮

上代码自己试验 <template> <view>  <image src="图片" class="

超、凢脫俗/ 2022年11月21日 04:05/ 0 赞/ 393 阅读

相关利用JQuery实现顶部导航栏功能

今天给大家介绍一下，如何利用JQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。下面举个例子具体介绍一下如何这些功能，案例如下：

落日映苍穹つ/ 2022年07月16日 11:40/ 0 赞/ 384 阅读

相关自定义顶部导航栏

创建自定义属性在res/values中创建名为attrs的文件。定义2个属性，分别是左边按钮和右边按钮，值是drawable，所以格式应该为refrence。

淩亂°似流年/ 2022年07月13日 23:42/ 0 赞/ 347 阅读

相关 uniapp 任务栏顶部导航适配

uniapp 任务栏顶部导航适配一、问题说明： 1、问题：手机型号不一样头部导航显示样式和高度都不一样，例如：刘海屏、挖孔屏 2、解决思路：

ゝ一世哀愁。/ 2021年09月18日 06:12/ 0 赞/ 597 阅读

相关 CSS+HTML 顶部导航栏实现

导航栏的实现、固定顶部导航栏、二级菜单实现效果图： ![在这里插入图片描述][70] -------------------- 2018/11/16更新：最

川长思鸟来/ 2021年09月16日 10:08/ 0 赞/ 531 阅读

相关 rn 顶部导航栏

(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-hand

逃离我推掉我的手/ 2021年07月24日 12:45/ 0 赞/ 768 阅读