【小程序】通过for循环实现Js数据的前台调用（商品列表示例）

1、 list.wxml

<!--pages/index/list.wxml-->
<!-- <text></text> -->
<view class="row" wx:for="{{listObj}}" wx:key="*this" >
    <view class="pic">
        <image src="../images/{{item.img}}.jpg"></image>
    </view>
    <view class="text">
        <view class="title">
            {{item.title}}
        </view>
        <view class="time">
            {{item.time}}
        </view>
    </view>
</view>

2、list.wxss

/* pages/index/list.wxss */
.row{display:flex;margin-top: 20rpx;margin-left: 20px;}
.pic{flex:2}
image{width:100%;height:150rpx;border-radius: 5px;}
.text{flex:8;padding-left: 20rpx; display: flex;flex-direction: column;}
.title{flex:7;font-size: 18px;}
.time{flex:4;color:rgb(182, 180, 180)}

3.list.js

// pages/index/list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        listObj: [
            { "title": "乾隆牌 - 帝王耳机", "time": "2022-01-04", "img": "b1" },
            { "title": "李世民牌 - 帝王耳机", "time": "2022-01-03", "img": "b2" },
            { "title": "秦始皇牌 - 帝王耳机", "time": "2022-01-01", "img": "b3" }
       ]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})