消息列表
展示
又图中可看出,虽然消息很多,但是他们的格式是一样的,我们依然可以用 wx:for 去列表渲染所有消息,所以整体大模块其实就只有一个
![在这里插入图片描述](http://image109.360doc.com/DownloadImg/2022/01/1412/237783041_1_20220114120727367_wm)
一般写法
<view class="card">
<text class='card-title'>标题111</text>
<text class='card-date'>2017-12-11</text>
<image class="card-img" src='https://m./mobilecms/s1125x549_jfs/t14776/179/342502886/126892/bc618b9e/5a2a317dN2c57e7b0.jpg!q70.jpg' mode="aspectFill"></image>
<text class='card-desc'>越努力,越幸运~</text>
<text class='card-read arrow'>查看详情</text>
</view>
wx:for
<view class="card" wx:for="{{ msgList }}" wx:key="id">
<text class='card-title'>{{ item.title }}</text>
<text class='card-date'>{{ item.title }}</text>
<image class="card-img" src='{{ item.image }}' mode="aspectFill"></image>
<text class='card-desc'>{{ item.desc }}</text>
<text class='card-read arrow'>查看详情</text>
</view>
message.json
用一个数字将数据保存起来,在wxml里就可以访问
// pages/message/message.js
Page({
/**
* 页面的初始数据
*/
data: {
msgList: [
{
id: '1',
title: "标题 111",
date: "2017-12-12",
image: "https://m./mobilecms/s1125x549_jfs/t14860/139/504394142/191023/ca7c592e/5a2fcd75Ncde0d77d.jpg!q70.jpg",
desc: "越努力越幸运。"
},
{
id: '2',
title: "标题 222",
date: "2017-12-12",
image: "https://img1./da/jfs/t15013/308/338076309/180567/6cd6603d/5a2a466cNff568379.jpg",
desc: "越努力越幸运。"
},
{
id: '3',
title: "标题 333",
date: "2017-12-12",
image: "https://m./mobilecms/s1125x549_jfs/t14023/275/1983074516/150155/84e8e488/5a2f7a69N4292c954.jpg!q70.jpg",
desc: "越努力越幸运。"
},
{
id: '4',
title: "标题 444",
date: "2017-12-12",
image: "https://m./mobilecms/s1125x549_jfs/t15328/245/519883024/134960/eedef659/5a2f8103Nb5f6cbab.jpg!q70.jpg",
desc: "越努力越幸运。"
},
{
id: '5',
title: "标题 555",
date: "2017-12-12",
image: "https://m./mobilecms/s1125x549_jfs/t15328/245/519883024/134960/eedef659/5a2f8103Nb5f6cbab.jpg!q70.jpg",
desc: "越努力越幸运。"
},
{
id: '6',
title: "标题 666",
date: "2017-12-12",
image: "https://m./mobilecms/s1125x549_jfs/t15328/245/519883024/134960/eedef659/5a2f8103Nb5f6cbab.jpg!q70.jpg",
desc: "越努力越幸运。"
},
{
id: '7',
title: "标题 777",
date:"2017-12-12",
image:"https://m./mobilecms/s1125x549_jfs/t15328/245/519883024/134960/eedef659/5a2f8103Nb5f6cbab.jpg!q70.jpg",
desc:"越努力越幸运。"
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
message.wxss
page{
background-color: #f1f1f1;
}
.card{
background-color: #fff;
border:1rpx solid #ddd;
border-radius: 10rpx;
margin: 60rpx 20rpx;
padding: 20rpx 30rpx;
display: flex;
flex-direction: column;
}
.card-title{
font-size: 20px;
margin-bottom: 20rpx;
}
.card-date{
font-size: 14px;
color:#ccc;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #ddd;
margin-bottom: 20rpx;
}
.card-img{
width: 100%;
height: 300rpx;
}
.card-desc{
font-size:16px;
color:#333;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #ddd;
margin: 20rpx 0 ;
}
.card-read{
font-size:14px;
color:#666;
}