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"}]}}}}
]

效果图

注意事项

配置按钮为字体

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

• 先下载字体文件，将ttf文件放入你的项目中，
  

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

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

• 比如我的字体unicode为
  

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！