微信小程序 for循环动态渲染页面

这种列表效果可以说是最常见的一种，肯定不是我们一个一个写上去，这就用到了我们这次要说的for循环渲染了

其实也很简单，我就直接上代码了

<view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'>
        <text class='yuzhong'>{{item.name}}</text>
    </view>

.select {
    height: 80rpx;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px dashed #5e5e62;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx;
    box-sizing: border-box;
}

.hua {
    height: 80rpx;
    border-bottom: 1px dashed #5e5e62;
    width: 90%;
    margin: 0 auto;
    padding-left: 10rpx;
    box-sizing: border-box;
}

.yuzhong {
    color: #fff;
    font-size: 32rpx;
    line-height: 80rpx;
}

 

data: {
        bg:"../../images/other_bg.png",
        language:'',
        isFlag:false,
        cid:'',
        // languageList:{},
        languageList:[
            {
                id:0,
                name:"菏泽"
            },
            {
                id: 1,
                name: "东北"
            },
            {
                id: 2,
                name: "北京"
            },
            {
                id: 3,
                name: "浙江"
            }

        ]
    },

想要获得更多资料的  请微信搜索公众号 【热血科技】，关注一下即可。