wx数据渲染

 wxml

<view class="all">
    <view class="box" wx:for="{{image}}">
        <view class="box-1">
            <view class="b-1">
                <image class="tp" src="{{item.img}}"></image>
            </view>
            <view class="b-2">
                <view class="a-1">
                    <text>{{item.mc}}</text>
                </view>
                <view class="a-2">
                    <view class="bq1">
                        <text>咖啡新会员专享</text>
                    </view>
                    <view class="bq2">
                        <text>限使用一次</text>
                    </view>
                </view>
                <view class="a-3">
                <text>{{item.text}}</text>
                </view>
                <view class="a-4">
                <view class="time">
                    <text>{{item.time}}</text>
                </view>
                <view class="butt">
                    <text>立即使用</text>
                </view>
                </view>
            </view>
            </view>
        <view class="box-2">
        <view class="left">
            <text>兑换说明</text>
        </view>
           <view class="right">
            <text>柜面核销</text>
           </view>
           

        </view>
    </view>


</view>

 wxss

.box{
    background-color: rgb(255, 255, 255);
    height: 160px;
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
}
.box-1{
    /* background-color: skyblue; */
    height: 80%;
    display: flex;
}
.box-2{
    background-color: rgb(236, 234, 234);
    height: 20%;
   display: flex;
}
.left{
    font-size: 12px;
    width: 80%;
}
.right{
    font-size: 12px;
}
.b-1{
    background-color: tan;
    height: 100%;
    width: 30%;
}
.b-2{
    /* background-color: rgb(176, 233, 179); */
    height: 100%;
    width: 70%;
}
.a-1{
    height: 25%;
    /* background-color: rgb(255, 133, 111); */
    
}
.a-2{
    height: 25%;
    background-color: rgb(255, 255, 255);
   display: flex;
}
.a-3{
    height: 25%;
    /* background-color: rgb(180, 147, 141); */
    font-weight: 700;
    color: tomato;
}
.a-4{
    height: 25%;
    /* background-color: tomato; */
    display: flex;
}
.bq1{
height: 80%;
width: 30%;
border: solid 1px rgb(233, 159, 47);
font-size: 10px;
text-align: center;
margin-right: 10px;
border-radius: 10px;
margin-top: 1%;

}

.bq2{
    height: 80%;
    width: 26%;
    border: solid 1px rgb(233, 159, 47);
    font-size: 10px;
    text-align: center;
    border-radius: 10px;
    margin-top: 1%;
}
.tp{
    width: 100%;
    height: 100%;
}
.time{
width: 50%;
    font-size: 10px;
    color: rgb(151, 150, 150);
}
.butt{
    margin-left: 10px;
    height: 80%;
    width: 40%;
    text-align: center;
    background-color: tomato;
    border-radius: 10px;
    color:white;
}

 js

在index.js中的data:{}中添加该代码

 image:[
            {
                "mc":"",
                "img":"",
                "text":"",
                "time":""
            },
            {
                "mc":"",
                "img":"",
                "text":"",
                "time":""
            },
            {
                "mc":"",
                "img":"",
                "text":"",
                "time":""
            }
        ]