更新小程序头像选择逻辑,采用绝对定位覆盖原生按钮,避免样式干扰。新增相关最佳实践文档,确保开发一致性和用户体验。优化个人资料页面,提升用户交互流畅性。
This commit is contained in:
41
.cursor/agent/小程序开发工程师/evolution/2026-03-19-原生按钮覆盖定位.md
Normal file
41
.cursor/agent/小程序开发工程师/evolution/2026-03-19-原生按钮覆盖定位.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# 原生按钮覆盖定位,避免样式干扰
|
||||
|
||||
**日期**:2026-03-19
|
||||
**场景**:小程序中需在头像、图片等区域触发 `open-type="chooseAvatar"` 等原生能力,用 `<button>` 包裹会导致原生样式(灰色矩形、边框等)影响界面。
|
||||
|
||||
**方案**:**不用 button 包裹**,改为 **button 绝对定位覆盖** 在目标区域上方。
|
||||
|
||||
## 正确结构
|
||||
|
||||
```html
|
||||
<!-- 外层:position: relative 作为定位参考 -->
|
||||
<view class="avatar-wrap">
|
||||
<!-- 实际展示内容:头像、徽章等 -->
|
||||
<view class="avatar-inner">...</view>
|
||||
<view class="vip-badge">VIP</view>
|
||||
<!-- 透明 button 覆盖在上方,同级而非包裹 -->
|
||||
<button class="avatar-overlay-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"></button>
|
||||
</view>
|
||||
```
|
||||
|
||||
```css
|
||||
.avatar-wrap { position: relative; }
|
||||
.avatar-overlay-btn {
|
||||
position: absolute; top: 0; left: 0;
|
||||
width: 130rpx; height: 130rpx; /* 与头像一致 */
|
||||
padding: 0; margin: 0;
|
||||
background: transparent; border: none;
|
||||
}
|
||||
.avatar-overlay-btn::after { border: none; }
|
||||
```
|
||||
|
||||
## 要点
|
||||
|
||||
- **同级关系**:button 与展示元素是 sibling,不是 parent-child
|
||||
- **绝对定位**:`position: absolute` 覆盖在目标区域上,不参与文档流
|
||||
- **透明无内容**:button 仅负责点击事件,样式完全透明
|
||||
- **适用**:chooseAvatar、open-type 等需 button 触发的原生能力
|
||||
|
||||
## 升级 Skill
|
||||
|
||||
已写入 `miniprogram-dev` SKILL §12。
|
||||
@@ -13,3 +13,4 @@
|
||||
| 2026-03-14 | 我的页设置入口隐藏;资料修改引导场景梳理(登录后、@某人、找伙伴、链接卡若) | [2026-03-14.md](./2026-03-14.md) |
|
||||
| 2026-03-16 | 编辑资料页分享名片:转发/朋友圈特殊处理,Canvas 绘制封面,标题「昵称+为您分享名片」 | [2026-03-16.md](./2026-03-16.md) |
|
||||
| 2026-03-17 | 代付美团式:读页→代付页→分享;详情页双态(发起人/好友);目录 loading、最新新增 5 条折叠 | [2026-03-17.md](./2026-03-17.md) |
|
||||
| 2026-03-19 | 原生按钮覆盖定位:chooseAvatar 等用绝对定位 overlay 覆盖,禁止 button 包裹,避免原生样式影响 | [2026-03-19-原生按钮覆盖定位.md](./2026-03-19-原生按钮覆盖定位.md) |
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
| 2026-03-17 | 后端、团队 | 架构/最佳实践 | api-dev SKILL | Redis 缓存:parts/hot/recommended/stats/config/章节 content;容灾回退 DB;OSS 上传;/health 返回 database/redis 状态 |
|
||||
| 2026-03-18 | 小程序、团队 | 业务规则/最佳实践 | - | 分享链路兼容好友/朋友圈 singlePage:单页模式能力降级(不支付/不自动领取),引导点击底部“前往小程序”进入完整版 |
|
||||
| 2026-03-18 | 产品、后端、管理端、测试 | 文档归档/需求口径 | - | 文档归档整理:以《以界面定需求》为基准,各角色重整“功能需求+验收口径+风险点”并写入各自经验库;补齐《项目落地推进表》 |
|
||||
| 2026-03-19 | 小程序 | 最佳实践 | miniprogram-dev SKILL §11 | 原生按钮覆盖定位:chooseAvatar 等用绝对定位 overlay 覆盖,禁止 button 包裹,避免原生样式影响(灰色矩形等) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -41,9 +41,10 @@
|
||||
| 2026-03-17 | 会议收尾:源码优化 5 项全部完成;开发环境测试通过 | 已完成 |
|
||||
| 2026-03-18 | 吸收经验:分享链路需兼容好友/朋友圈 singlePage;单页模式能力降级并引导“前往小程序”进入完整版 | 已完成 |
|
||||
| 2026-03-18 | 会议:支付超级个体前/开通后资料默认校验,跳转 avatar-nickname 引导页(仅头像+昵称) | 已完成 |
|
||||
| 2026-03-19 | 吸收经验:原生按钮覆盖定位,chooseAvatar 用绝对定位 overlay 覆盖头像,禁止 button 包裹,已升级 SKILL §11 | 已完成 |
|
||||
|
||||
> **格式说明**:每次开发后在此追加一行,日期格式 YYYY-MM-DD,状态用:已完成 / 进行中 / 待续 / 搁置
|
||||
|
||||
---
|
||||
|
||||
**最后更新**:2026-03-18
|
||||
**最后更新**:2026-03-19
|
||||
|
||||
Reference in New Issue
Block a user