基本信息

---

下载

文档摘要

---

微信小程序开发

北方工业大学

案例

打印九九乘法表

案例描述

编写一个小程序，综合运用wx:if条件渲染和

wx:for列表渲染在视图层打印一个九九乘法表。

实现效果

案例实现

电脑录屏

知识要点

本案例综合运用条件渲染和双重列表渲染实现了

打印九九乘法表的算法，同时使用了inline-block属性

设置布局方式。

双重列表渲染

外循环内循环

打印九九乘法表算法

首先确定在哪个位置打印三角形九九乘法表，如

果在左下角打印，则：第1行打印1列：1×1=1，第2

行打印2列：2×1=22×2=4，第i行打印i列，……，

第9行打印9列。

打印九九乘法表算法

假设用i表示行元素值并进行外循环，利用j表

示列元素值并进行内循环，i和j的列表渲染数组都是

[1,2,3,4,5,6,7,8,9]，由于左下角位置的九九乘法表的

行元素值要大于或等于列元素值，因此当满足i=j时

打印出i×j=i*j即可。

利用inline-block设置布局方式

设置了inline-block属性的元素既拥有了block

元素可以设置width和height的特性，又保持了

inline元素不换行的特性。

案例

总结

知识要点

?双重wx:for列表渲染的应用

?inline-block样式的应用