思路:用嵌套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;
}