一、需求分析
本次案例我们利用小程序列表渲染 wx:for来实现九九乘法表，核心需求：
- 页面展示标题 + 九九乘法表
- 整体纵向从上到下排布，每一行内部横向从左到右排列
- 使用双层循环（双层 wx:for），搭配列表渲染、条件渲染知识点
- 美化样式，排版整洁好看
核心知识点：双层
wx:for列表渲染、wx:for-index指定索引名、flex 弹性布局、条件渲染wx:if。 原理：九九乘法表规律：第 i 行，有 i 个式子，i * j，j ≤ i。
二、完整代码
index.wxml
index.wxss
index.js
index.json
三、代码详解
- 双层 wx:for 列表渲染
- 外层
wx:for="{{9}}"，循环 9 次，代表一共 9 行；wx:for-index="i"，外层索引 i，取值 0~8，对应 1~9 行。 - 内层
wx:for="{{i+1}}"：第 i 行（索引从 0 开始），元素个数等于 i+1，正好满足九九乘法表：第 1 行 1 个式子，第 2 行 2 个式子…… 第 9 行 9 个式子。 wx:key必须设置，用来提升列表渲染性能。
- 表达式计算
{{j+1}} × {{i+1}} = {{(j+1)*(i+1)}}索引都是从 0 开始，所以要 + 1，得到真实乘数。 - 布局说明
- 外层容器纵向自然流，从上到下依次渲染每一行；
.row设置display:flex;flex-direction:row，一行内所有乘法式子横向从左向右排列；flex-wrap:wrap防止小屏幕挤压溢出，自动换行。
- 拓展：条件渲染写法（满足题目要求【使用条件渲染】） 如果你需要加入
wx:if条件渲染版本（题目要求用到条件渲染），wxml 可以改成下面版本：
四、运行效果预览
页面顶部标题【九九乘法表】
1×1=1 1×2=2 2×2=4 1×3=3 2×3=6 3×3=9 …… 1×9=9 …… 9×9=81每行横向排列，整体从上往下排列，卡片样式干净美观。
五、知识点总结
wx:for：小程序列表渲染，用来循环生成重复节点；wx:for-index：自定义循环索引变量名，多层循环避免变量冲突；wx:if：条件渲染，满足条件才渲染节点；- flex 横向布局，轻松实现一行内元素从左到右排列；
- 插值表达式内支持简单算术运算。
六、拓展思考
- 对比两种写法： 方案 A：内层循环
i+1次，不需要 wx:if； 方案 B：内层固定循环 9 次，wx:if 判断显示（本题推荐，符合题目 “条件渲染” 要求） - 可以修改背景色、卡片颜色，做成彩色乘法表。
