flex布局：小程序输出梯状乘法口诀表

原创于 2019-03-23 17:02:57 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

前端专栏收录该内容

6 篇文章

订阅专栏

本文展示了一个使用WXML、WXSS和JS实现的简单乘法表格应用案例。通过wx:for指令遍历数据生成乘法表，展示了基本的WXML语法和WXSS样式设置。

WXML代码

<view class='Line' wx:for='{{Nums}}' wx:for-item="i">
  <view wx:for='{{Nums}}' wx:for-item="j">
    <view wx:if="{{j<=i}}">
      {{j}}*{{i}}={{i*j}},
    </view>
  </view>
</view>

JS代码

Page({
  data: {
    Nums: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
  }
})

WXSS代码

.Line{
  display: flex;
  flex-direction: row;
  font-size: 24rpx;
}

效果，字体太小看不见，将就吧