企业官网建设流程全解析

1. 在页面展示九九乘法口诀表，纵向分行，每行内部横向排列算式。
2. 使用嵌套wx:for列表渲染、wx:if条件渲染控制显示内容。
3. 页面展示标题，样式美观。
4. 扩展功能：奇数行、偶数行设置不同背景颜色；每个乘法算式项增加边框。
5. 页面横屏展示。

app.json

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

修改为横屏

{ "pageOrientation": "landscape" }

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 --> <view class="row" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> <!--内层循环：列 j --> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"> <view class="item {{i%2===0?'even-row':'odd-row'}}" wx:if="{{j <= i}}"> {{j}}*{{i}}={{j*i}} </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; }

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: 78rpx; border: 2rpx solid blue; padding: 8rpx; } /* 偶数行背景色 */ .even-row { background-color: #87cefa; } /* 奇数行背景色 */ .odd-row { background-color: #ffb380; }

九九乘法表这个小案例，浓缩了小程序非常高频的模板语法：嵌套列表渲染、条件渲染、动态 class、Flex 弹性布局。 列表渲染不是只能渲染后端接口返回的数据，也可以渲染简单数字数组；配合条件渲染就可以过滤不需要展示的内容；动态 class 可以轻松实现隔行变色、状态切换等常见 UI 效果。掌握这些基础，是后续做列表页面、商品列表、表单渲染的基础。