uniapp自定义导航的自定义按钮上的红点动态控制

在page.json页面写好路由

"buttons": [{
	{
		"fontSrc": "/static/yticon.ttf",
		"text": "\ue744",
		"fontSize": "27",
		"color": "#303133",
		"background": "rgba(0,0,0,0)",
		"redDot": true  //红点
	}
]

动态设置红点的显示与隐藏;index是按钮的下标

if(count == 0) {
	//隐藏
	// #ifdef APP-PLUS
	const pages = getCurrentPages();
	const page = pages[pages.length - 1];
	const currentWebview = page.$getAppWebview();
	currentWebview.hideTitleNViewButtonRedDot({
		index:1
	});
	// #endif
}else{
	//显示
	// #ifdef APP-PLUS
	const pages = getCurrentPages();
	const page = pages[pages.length - 1];
	const currentWebview = page.$getAppWebview();
	currentWebview.showTitleNViewButtonRedDot({
		index:1
	});
	// #endif
}
### 如何设置或更改 UniApp 应用图标 在开发过程中,如果需要修改 UniApp 的应用图标,可以通过配置 `manifest.json` 文件来实现。以下是详细的说明: #### 修改应用图标 在 UniApp 中,应用图标的修改主要通过项目的 `manifest.json` 配置文件完成。具体操作如下: - 打开项目根目录下的 `manifest.json` 文件。 - 转到 **“App模块”** 或者 **“基础信息”** 页面,在该页面可以找到关于应用名称和图标的相关选项。 - 将所需的图标上传至指定位置,通常支持 PNG 格式的图片[^1]。 需要注意的是,默认情况下,如果没有正确配置自定义图标路径,则会使用 HBuilder 默认提供的图标作为占位符。 #### 图标尺寸要求 不同平台对于应用图标的尺寸有不同的要求,因此建议准备多套分辨率的图标以适配各种设备屏幕密度。一般推荐制作以下几种规格的图标并放置于静态资源目录下(如 `/static/icons/`): | 平台 | 推荐大小 (像素) | |------------|----------------| | Android | 96×96 | | iOS | 1024×1024 | 这些图标应命名为一致以便管理,例如:`icon_72x72.png`, `icon_96x96.png` 等等[^3]。 #### 动态加载字体图标 除了直接替换整个 APP 图标外,还可以利用 CSS 和 HTML 实现动态加载字体图标的功能。这适用于某些特定场景比如导航按钮或者菜单项内的小标志显示。下面是一个例子展示如何导入远程服务器上的 `.ttf` 字体文件用于界面设计: ```css /* 定义新的字体 */ @font-face { font-family: 'customIcon'; src: url('https://example.com/fonts/custom-icon.ttf') format('truetype'); } .icon-class { font-family: customIcon; } ``` 另外也可以借助第三方 CDN 来简化流程: ```html <!-- 导入外部样式表 --> <link rel="stylesheet" href="https://cdn.example.org/style.css"> <view class="external-icon"></view> ``` #### 设置未读消息角标 为了增强用户体验,有时还需要给应用程序添加一些额外功能,像通知提醒的小红点之类的东西。这里介绍一款名为 `Ba-Shortcut-Badge` 的插件可以帮助开发者轻松达成这一目标[^4]。它兼容多种主流品牌手机,并提供了简单易懂 API 让我们能够快速集成此特性进入自己的产品之中。 --- ### 总结 综上所述,无论是调整整体外观还是局部装饰都可以依靠上述方法顺利完成。记得每次改动之后重新编译构建工程才能看到最终效果哦!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值