微信小程序---列表嵌套渲染实例

官方文档关于列表渲染的说明。

列表渲染是动态写页面的重要方法，我们从服务器拿到数据后可以根据数据结构对当前页面进行动态渲染，使页面更加灵活，维护更新起来也更加方便快捷。

微信小程序中数组的定义 array[ [], [], [], [], [{a:’asda’}],[],b:’asdas’,{c:’qwdq’}]。

如何提取a、b、c的值？
this.data.array[4][0].a;b不能这样赋值;this.data.array[6].c;
通过控制台输出该数组就能发现如何提取参数。

掌握列表渲染必须理解数组的定义。

下面讲解九九乘法表的渲染方法。效果图—

首先js里for循环创建数组

Page({
    data: {
        array:[],
    },
    onLoad: function (options) {
        var txt = this;
        for (var i = 1; i < 10; i++) {
            for (var j = 1; j < 10; j++) {
                if(i*j<10){
        txt.setData({
            ['array['+(i-1)+']['+(j-1)+']']:'0'+i*j//十位补零
        })
                }
                else{
                    txt.setData({
                        ['array[' + (i - 1) + '][' + (j - 1) + ']']: ''+ i * j
                    })
                }
            }
        }
        console.log(txt.data.array)
    },
})

wxml里创建容器渲染页面

<view class='list'>
    <block wx:for='{{array}}' wx:for-item='array' wx:for-index='arrayin' wx:key='arraykey' >
        <view class='box'>
            <block wx:for='{{array}}' wx:for-item='array1' wx:for-index='arrayin1' wx:key='arraykey1' >
                <text class='boxtxt'>{{array[arrayin1]}}text>
            block>
        view>
    block>
view>

wxss详细设置界面

.list{
    width: 100%;
    height: 100%;
    background-color: pink;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.box{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.boxtxt{
    color: #fff;
}

循环创建的数组详细内容和数据结构

wxml里第一个 block 标签对 array循环创建九个容器
第二个 block 标签对 array[0]~array[8]循环创建九个容器
打开控制台的wxml窗口对模拟器的页面审查，并对view 和 text标签添加数字，可以清楚看出来各个容器的排列。

总结—-列表渲染时，根据数组一维的长度排布容器，接着根据二维的长度….直到进行到最后一维。数据绑定取得的数据也是从最后一维取数据。例如本例中{{array[arrayin1]}}，第一个容器拿到的数据等同于array[0][0~8],第二个是array[1][0~8]……直到array[8][0~8]循环完毕。

补充实例—
{{数组[下标]}},[]中括号内可以进行运算，比如 下标+1 ||下标*2+8 ||下标+2*5，我们可以根据数据的具体结构改变我们取值的位置。
例如这样一个效果

字体颜色、字体内容、字体位置（一位数要和两位数的中间对齐）、承载字体的view圆形容器的背景颜色，
如何用一个数组同时对以上四种内容进行列表渲染？
首先我们看这个数组的内容和结构

0~4：具体内容；5~9：view标签背景颜色；10~14：字体颜色；15~19：相对应字体的具体左移距离。
wxml渲染代码

代码中{{lie[hangdex+5/10/15]}} 便是取数组中不同的内容对容器属性的渲染。
{{lie[hangdex]}}则是取数字。

喜欢还请点赞！
欢迎评论区留言交流！
随意转载，注明出处即可。