用 Taro 开发小程序：答题卡网格布局的兼容性问题总结

背景

在做一个刷题小程序时，需要实现一个答题卡界面——用网格展示所有题目状态（未答/已答/当前题），支持点击跳转。在 Web 上几行 CSS 搞定，在小程序里却踩了不少坑。

问题一：gap 属性在小程序里不生效

这是最常见的问题。CSS gap 属性用于设置网格/弹性盒子的间距，在主流浏览器都支持，但在微信小程序、支付宝小程序里均不支持。解决方案：

/* ❌ 小程序不支持 */
.grid { display: grid; gap: 16px; }

/* ✅ 改用 margin 模拟 */
.grid { display: grid; }
.grid-item { margin-right: 16px; margin-bottom: 16px; }
/* 最后一项去掉右边距 */
.grid-item:last-child { margin-right: 0; }

问题二：display: grid 在某些机型的兼容情况

iOS 微信大部分版本支持 grid，但 Android 端部分机型（尤其是低端机）的 UC/QQ 浏览器内核不支持。推荐降级方案：用 flex + 百分比宽度实现网格。

/* ✅ 兼容写法：flex 模拟网格 */
.row { display: flex; flex-wrap: wrap; }
.cell { width: 48px; height: 48px; margin: 0 4px 8px 0; }

问题三：:nth-child 在某些场景下失效

nth-child 在动态列表（数据来自接口）时表现正常，但在用 v-for 遍历固定数量的数字时，微信开发者工具和部分真机行为不一致。解决方案是改用 v-if 或加辅助 class。

实战答题卡组件代码

const AnswerCard = ({ questions, currentIndex, onJump }) => {
  return (
    <View className='answer-card'>
      <View className='row'>
        {questions.map((q, i) => (
          <View
            key={q.id}
            className={`cell ${i === currentIndex ? 'current' : ''} ${q.answered ? 'done' : 'undone'}`}
            onClick={() => onJump(i)}
          >
            {i + 1}
          </View>
        ))}
      </View>
    </View>
  )
}

小结

小程序开发的本质是与 CSS 兼容层打交道。遇到 display、gap、nth-child 等属性，先查 caniuse，再想降级方案。开发阶段多用真机调试，开发者工具的结果不一定准确。

来源：https://www.dnote.cn