TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
118篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
uni-app自定义导航栏按钮
3924
人阅读
2020/1/29 17:20
总访问:
3841004
评论:
0
收藏:
0
手机
分类:
前端
**自定义导航栏按钮文档** https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons **按钮类型默认提供了这些,要使用很简单配置一下即可** forward 前进按钮 back 后退按钮 share 分享按钮 favorite 收藏按钮 home 主页按钮 menu 菜单按钮 close 关闭按钮 代码如下: ``` "style": { "navigationBarTitleText": "导航栏带自定义按钮", "app-plus": { "titleNView": { "buttons": [{ "type": "share" }, { "type": "favorite" } ] } } } ``` 效果: ![](https://img.tnblog.net/arcimg/xiuxin/a461b480f3c74199bdf915c012a7ea5b.png) 这些规定的类型要换什么换就行了 **如果这些图标没有我们想要的,可以使用字体图标** 就是fontSrc和text两个属性: ``` "style": { "navigationBarTitleText": "我的便签", "app-plus": { "titleNView": { "buttons": [{ "fontSrc": "/static/uni.ttf", "text": "\ue409", "width": "auto", "fontSize": "23px", "color": "#fff" } ] } } } ``` 比如下面的效果就是一个+号的图标, ![](https://img.tnblog.net/arcimg/xiuxin/ef6d6e6bd2a94fa8b8117ad2c0769e0a.png) 不过这个字体图标库里边的图标编码,在官方上面的图标库没有显示出来 https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons 手机体验那个deml是有的,那个源码demo里边也可以看到对应关系 ![](https://img.tnblog.net/arcimg/xiuxin/5e5cb9a339b34cce997d045dfa94035d.png)
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}