20 lines
853 B
Markdown
20 lines
853 B
Markdown
|
# 小程序开发工程师 经验记录 - 2026-02-27
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 输入框 padding 最佳实践
|
|||
|
|
|
|||
|
|
- **场景**：设置 input 的 padding、背景、边框等样式时，直接作用于 input 可能导致光标被截断、布局异常。
|
|||
|
|
- **方案**：用 `<view>` 包裹 `<input>`，padding/背景/边框写在 view 上，input 仅设置 width、font-size、color 等文字相关样式。
|
|||
|
|
- **示例**：
|
|||
|
|
```xml
|
|||
|
|
<view class="form-input">
|
|||
|
|
<input placeholder="提示文字" value="{{value}}" bindinput="onInput" />
|
|||
|
|
</view>
|
|||
|
|
```
|
|||
|
|
```css
|
|||
|
|
.form-input { padding: 16rpx 24rpx; background: rgba(255,255,255,0.06); border: 1rpx solid rgba(255,255,255,0.1); border-radius: 12rpx; }
|
|||
|
|
.form-input input { width: 100%; font-size: 28rpx; color: #fff; background: transparent; }
|
|||
|
|
```
|
|||
|
|
- **升级**：已写入 SKILL-小程序开发 §6 表单与输入框
|