微信小程序：九九乘法表

思路：用嵌套for循环和if判断就能实现

1.首先在js的data里面定义好我们要的9个数字，用数组。

2.两层for循环，在最里面的循环里面要判断当前的列是否小于行。

这里要注意的是，微信小程序默认的item就不能用了，我们要自己定义

wx:for-item="line"————这是行

wx:for-item="column"————这是列

不然只有一个item，不好表示。

效果图：

 

four.js

// pages/tab/tab.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
  
      nums:[1,2,3,4,5,6,7,8,9]
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
  
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  
    }
  })

four.json

{
  "usingComponents": {}
}

four.wxml

<!--pages/tab/tab.wxml-->
<view  class="pageview">
  <block  wx:for="{{nums}}" wx:for-item="line">
        <view  class="lineview">
             <block  wx:for="{{nums}}" wx:for-item="column">
               <block  wx:if="{{column<=line}}">
                <view  class="columnview">
                 {{line}}*{{column}}={{line*column}}
                 </view>
               </block>
              </block>
        </view>
  </block>
</view>

four.wxss

/* pages/tab/tab.wxss */
.pageview{
    width: 100%;
    height: 100vh;
  }
  .lineview{
    width: 100%;
    height: 5%;
    display: flex;
  }
  .columnview{
    width: 10%;
    height: 100%;
    font-size: 8px;
  }