soul-yongping/.cursor/agent/小程序开发工程师/evolution/2026-02-27.md

小程序开发工程师 经验记录 - 2026-02-27

---

输入框 padding 最佳实践

• 场景：设置 input 的 padding、背景、边框等样式时，直接作用于 input 可能导致光标被截断、布局异常。
• 方案：用 <view> 包裹 <input>，padding/背景/边框写在 view 上，input 仅设置 width、font-size、color 等文字相关样式。
• 示例：

  <view class="form-input">
    <input placeholder="提示文字" value="{{value}}" bindinput="onInput" />
  </view>
  

  .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 表单与输入框