微信小程序实验：列表渲染和九九乘法表-平芜编程栈

一、前言

wx:for是小程序的列表渲染指令，可以循环数组快速生成重复 UI。业务中经常遇到双层循环嵌套场景，九九乘法表就是非常经典的学习案例。本案例使用嵌套wx:for列表渲染 +wx:if条件渲染实现九九乘法口诀表，并且完成作业扩展：奇偶行不同背景色、每个算式增加边框，页面设置横屏展示，适配乘法表宽布局。

实现效果：

整体纵向排列，每一行内部横向排列算式；
只渲染左下三角区域（j<=i）；
奇数行、偶数行区分背景颜色；
每个乘法算式带蓝色边框；
页面强制横屏展示。

新建小程序项目，不使用云服务、不使用模板。

关键配置：app.json设置"renderer":"webview"使用 webview 渲染引擎；index.json设置"pageOrientation":"landscape"开启页面横屏。

二、代码

app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview", "componentFramework": "glass‑easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

pages/index/index.json

{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" }, "pageOrientation": "landscape" }

核心知识点

嵌套 wx:for
- 外层循环代表行 i，使用wx:for-index="rowIdx"拿到行下标，用来做奇偶行颜色判断；
- 内层循环代表列 j；
wx:if="{{j <= i}}"条件渲染，只渲染左下三角，过滤右上半边多余算式；
动态内联style：style="background-color: {{ rowIdx%2 ===0 ? '#ffad87':'#87c8ff' }}"实现奇偶行切换背景色；
flex 布局：外层 content 纵向排列，每一行 row 横向排列。

pages/index/index.wxml

<navigation-bar title="九九乘法表" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">九九乘法口诀表</view> <view class="content"> <!-- 外层循环：行 i，rowIdx为行下标 --> <view class="row" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i" wx:for-index="rowIdx"> <!-- 内层循环：列 j --> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"> <!-- j<=i才渲染，实现左下三角；动态绑定奇偶行背景色 --> <view wx:if="{{j <= i}}" class="item" style="background-color: {{ rowIdx%2 ===0 ? '#ffad87':'#87c8ff' }};"> {{j}}*{{i}}={{i*j}} </view> </view> </view> </view> </view> </scroll-view>

app.wxss 全局样式

.box { margin: 20rpx; padding: 20rpx; border: 4rpx solid pink; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }

pages/index/index.wxss 页面局部样式

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .content { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; } .item { width: 64rpx; border: 1rpx solid blue; font-size: 20rpx; padding: 6rpx; }

三、实现效果

四、核心知识点详解

1. wx:for 列表渲染

wx:for="{{[1,2,3,4,5,6,7,8,9]}}"直接写字面量数组，循环 1‑9；
wx:for-item="i"：自定义循环变量名字，避免嵌套循环变量名冲突；
wx:for-index="rowIdx"：拿到当前循环的下标索引；

⚠️嵌套循环一定要给每一层起不同 item 名字，否则内外层变量会覆盖，出现逻辑错误。

2. wx:if 条件渲染

wx:if="{{j <= i}}"：只有列 j 小于等于行 i 的时候才渲染表达式，实现九九乘法表的左下三角效果，右上角不会出现多余式子。

wx:if为 false 会直接销毁组件，不是简单display:none隐藏。

3. 动态 style 实现奇偶行变色

style="background-color: {{ rowIdx%2 ===0 ? '#ffad87':'#87c8ff' }}"

三元运算符：

rowIdx%2===0：下标偶数（第 1、3、5、7、9 行），使用橘色#ffad87；
下标奇数（2、4、6、8 行），使用浅蓝色#87c8ff。

4. flex 布局分工

.content：flex‑direction:column，纵向，控制所有行从上到下；
.row：flex‑direction:row，横向，一行内算式从左到右依次排列；
flex‑wrap:nowrap禁止换行，保证同一行所有算式挤在同一行。

5. 页面横屏配置 index.json

{"pageOrientation":"landscape"}

landscape开启横屏，乘法表宽度很大，横屏展示效果更友好。

五、作业扩展实现说明

奇偶行不同背景色通过外层循环的rowIdx行下标取模运算，三元表达式动态绑定style背景色。
每个算式增加边框在.item样式增加border:1rpx solid blue;，给每一个乘法表达式增加蓝色边框。

六、踩坑记录

嵌套 wx:for 忘记重命名 item：内外层都用默认item变量，变量互相覆盖，乘法表错乱。嵌套循环必须写wx:for‑item区分变量名。
乘法表排版错乱：row 样式忘记设置flex‑wrap:nowrap导致自动换行。
横屏不生效：没有在index.json配置pageOrientation:"landscape"，写在 app.json 无效，该属性是页面级配置。
样式错乱：app.json 忘记配置renderer:"webview"，会出现部分组件、样式兼容性 bug。