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