最省事是直接用uni-grid组件，但column值勿超5；需显式设.uni-grid-item高度；@change返回的是数组下标而非页面索引；横向滚动应改用scroll-view+手动吸附。
直接用 uni-grid 组件最省事，但别乱设 column 值
uni-app 官方 uni-grid 是专为宫格导航设计的，比手写 flex 更稳——它自动处理了跨端 padding、border-box、高亮反馈和点击事件透传。但注意：column 属性最大别超 5，否则在支付宝小程序或低版本微信基础库里容易撑出容器、文字换行错位。默认值是 3，九宫格就写 :column="3"，八宫格也用 3 列（最后一行空一格），别硬凑 4 列——iOS 微信里 4 列常因 rpx 计算误差导致第四项掉行。
自定义样式时，.uni-grid-item 的 height 必须显式设，不能靠内容撑
官网文档没明说，但真机上常见问题：安卓低端机里 grid-item 高度塌陷、图标和文字上下不对齐。原因是 uni-grid-item 默认 height: auto，而内部 view 没设高度时，某些平台渲染顺序会让高度计算为 0。解决方法很简单：
- 在样式里加
.uni-grid-item { height: 120rpx !important; }（数值按实际图标+文字高度微调） - 如果用了
square="true"，它会强制宽高相等，但依然建议补上height，避免 H5 端 fallback 失效 - 别用
min-height，小程序不认
@change 事件返回的 index 是数组下标，不是页面路径索引
很多人把 uni-grid 当成 tab 切换器，直接拿 e.detail.index 去跳转 pages.json 里的第 N 个页面，结果点第三格却进了“购物车”。这是因为 @change 返回的是当前点击的 uni-grid-item 在 v-for 列表里的位置，和 pages.json 顺序无关。正确做法是：
- 给每个 item 绑定唯一标识，比如
:data-id="item.id"或用v-for="(item, i) in list"后在事件里查list[i] - 如果只是静态菜单（如首页、分类、购物车），直接在
@change里写死跳转逻辑：uni.navigateTo({ url: '/pages/category/category' }) - 千万别在
change回调里再嵌套uni.switchTab，App 端会白屏
真机滑动宫格？别用 uni-grid 套 swiper，改用 scroll-view + 手动吸附
官方示例里把 uni-grid 放进 swiper 实现横向滚动，这在 H5 没问题，但微信小程序里 swiper 会劫持 touch 事件，导致惯性滑动卡顿、快速拖拽失灵。美团/淘宝那种分类导航必须用 scroll-view：
- 父容器设固定高度（比如
height: 120rpx），否则内容塌陷 - 子项用
display: inline-block或flex横排，宽度统一为160rpx（别用百分比） - 吸附逻辑写在
@scrollend里，用this.scrollLeft = Math.round(e.detail.scrollLeft / 160) * 160，别在@scroll里直接赋值，否则循环触发 - 小程序平台注意：
scroll-left单位是 px，得先转：uni.upx2px(160)
真正麻烦的不是写法，而是不同平台对 rpx 和滚动事件的解析差异——iOS 微信里 scroll-view 的 scroll-left 可能延迟一帧更新，Android 上又可能多触发一次 scrollend。上线前务必用真机连微信开发者工具调试滚动边界。
