返回图标

#返回图标

输入图片说明

80px*80px 纯色图标

输入图片说明

.icon{

	       position: absolute;
				top: 14px;
				left: 10px;
				width: 23px;
				height: 23px;
				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGMkEyQkQxMjdBNDExRTU4NjA2QTJDMjFDQ0I0ODhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGMkEyQkQyMjdBNDExRTU4NjA2QTJDMjFDQ0I0ODhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkYyQTJCQ0YyN0E0MTFFNTg2MDZBMkMyMUNDQjQ4OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkYyQTJCRDAyN0E0MTFFNTg2MDZBMkMyMUNDQjQ4OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Ia560AAAHWklEQVR42uyd7W9U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);
				background-size: contain;

			}

转载于:https://my.oschina.net/oneboi/blog/792825

<think>嗯,用户的问题是关于u-navbar中出现双返回图标的实现和样式问题。首先,我需要理解u-navbar是什么。根据引用[2]和[3],u-navbar是uni-app中的一个自定义导航栏组件,基于uView进行二次封装。用户提到有两个返回图标,这可能是因为某些配置冲突或者多个返回按钮被错误地添加了。 接下来,我需要查看用户提供的引用内容,特别是关于返回图标的部分。引用[3]中的代码示例展示了如何在u-navbar的右侧添加图标,但用户的问题是关于双返回图标,这可能出现在左侧。引用[4]提到,当设置autoBack为false时,可能需要使用leftIconSize="0"来隐藏返回图标。而引用[5]是关于iOS导航栏透明和隐藏返回按钮的设置,可能不直接相关,但可以辅助理解导航栏的配置逻辑。 用户可能的情况是,在配置u-navbar时,同时启用了默认的返回图标,并且可能手动添加了另一个返回图标,导致重复显示。例如,可能同时使用了is-back属性(会生成默认返回图标)和自定义的slot,或者在多个地方添加了返回按钮。 需要检查代码中是否存在多个返回图标的来源。比如,是否在slot="left"中自定义了图标,但未关闭默认的返回图标,导致两者同时显示。解决方案可能包括关闭默认返回图标,使用leftIconSize="0"或is-back="false",或者在自定义slot时确保不重复添加。 此外,样式问题可能涉及图标的大小、颜色或位置不一致,导致两个返回图标看起来不同。需要检查leftIconSize、back-icon-color等属性是否统一设置,或者自定义样式是否覆盖了默认样式。 总结可能的原因和解决方法:默认返回图标和自定义返回图标同时存在,需关闭其中一个;样式属性设置不一致导致视觉上的两个图标;slot使用错误导致重复插入。需要指导用户检查代码中的相关配置,使用正确的属性控制显示,并统一样式设置。</think>### 关于u-navbar双返回图标的实现与样式问题分析 #### 1. 双返回图标的常见原因 双返回图标通常由以下原因导致: - **默认返回图标与自定义图标共存**:u-navbar默认自带返回按钮(通过`is-back`属性控制),若同时在左侧插槽(`slot="left"`)手动添加图标,会导致重复显示[^2][^4]。 - **样式覆盖不彻底**:当尝试隐藏默认返回图标时,未正确设置`leftIconSize="0"`或`autoBack="false"`,导致图标残留[^5]。 #### 2. 实现双返回图标的示例 若需要**刻意实现双返回图标**(例如不同功能的按钮),可通过以下代码实现: ```html <u-navbar is-back :left-icon-size="0"> <view slot="left"> <u-icon name="arrow-left" @click="handleBack1"></u-icon> <u-icon name="close" @click="handleBack2" style="margin-left: 20rpx;"></u-icon> </view> </u-navbar> ``` 需注意: 1. 关闭默认返回图标:设置`leftIconSize="0"`或`autoBack="false"` 2. 通过`slot="left"`完全自定义左侧区域[^3] #### 3. 样式调整建议 若出现双图标样式不统一(如颜色/大小差异),需检查以下属性: ```html <u-navbar back-icon-color="#333" :back-icon-size="30" title-color="#333" :left-icon-size="0"> </u-navbar> ``` - 统一通过`back-icon-*`系列属性控制默认图标样式 - 自定义图标样式需内联或通过CSS类覆盖[^3] #### 4. 常见问题排查表 | 现象 | 解决方案 | |-------|----------| | 默认+自定义图标共存 | 设置`:left-icon-size="0"`或`autoBack="false"` | | 自定义图标颜色不一致 | 检查是否设置`back-icon-color`或自定义样式冲突 | | 图标位置偏移 | 使用`margin/padding`调整间距,注意使用`rpx`单位[^3] |
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值