uniapp配置app-plus搜索栏

pages.json

"pages": [
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"app-plus":{
				"scrollIndicator": "none",
				"titleNView": {
					"backgroundColor": "#FFFFFF",
					// 搜索框
					"searchInput": {
						"align": "center",
						"backgroundColor": "#f7f7f7",
						"borderRadius": "5px",
						"placeholder":"搜索糗事",
						"placeholderColor":"#cccccc",
						"disabled":true
					},
					// 按钮
					"buttons":[
						{
							"color":"#fee42a",
							"float": "left",
							"fontSize": "20px",
							"colorPressed":"#cccccc",
							"fontSrc": "/static/font/iconfont.ttf",
							"text": "\ue606"
						},
						{
							"color":"#303030",
							"float": "right",
							"fontSize": "20px",
							"colorPressed":"#cccccc",
							"fontSrc": "/static/font/iconfont.ttf",
							"text": "\ue63c"
						}
					]
				}
			}
		}
	}
]

效果图

uniapp配置app-plus搜索栏_第1张图片

注意事项

配置按钮为字体

  • 我采用的是
    阿里图标库 的字体

  • 先下载字体文件,将ttf文件放入你的项目中,
    uniapp配置app-plus搜索栏_第2张图片

  • 按钮的 fontSrc 路径为你的字体ttf路径

  • 按钮的 text 为unicode字体代码
    官方明确标明
    按钮上显示的文字。使用字体图标时 unicode 字符表示必须 \u 开头

  • 比如我的字体unicode为
    uniapp配置app-plus搜索栏_第3张图片

 我们要换成\ue63c 将e后面的截取去除分号;,前面加上\u即可

你可能感兴趣的:(uniapp,javascript)