首页 > 编程知识 正文

uniapp自定义标题栏,uniapp导航栏右侧按钮

时间:2023-05-03 19:46:59 阅读:188415 作者:1459

首先下载阿里小图标,将选好的小图标添加入库,选择下载代码
将下载好的代码解压,
将iconfont.ttf文件拷到static文件夹下,打开iconfont.json找到对应的unicode
在main.json里面设置"navigationStyle": “custom”,对应的引入图标的text是在unicode前面加/u,比如“ue503”,fontSrc为iconfont.ttf的路径,fontSize为图标大小,color为图标颜色 {"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","navigationStyle": "custom","app-plus": {"titleNView": {"buttons": [{"text": "西安","fontSize": "18px","float": "left","width": "auto","select": true},{"text": "ue503","fontSrc": "/static/iconfont.ttf","fontSize": "24px","float": "right","color": "#d81e06","width": "50"},{"text": "ue67a","fontSrc": "/static/iconfont.ttf","fontSize": "24px","color": "#1296db","float": "right","width": "50"}]}}}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}}

最后附上效果图

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。