![](https://i-blog.csdnimg.cn/blog_migrate/00e546de2eeaecd7d128c4f8dda1c726.png)
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 () {
}
})