消息列表
展示
又图中可看出，虽然消息很多，但是他们的格式是一样的，我们依然可以用 wx:for 去列表渲染所有消息，所以整体大模块其实就只有一个
一般写法
<view class="card"> <text class='card-title'>标题111</text> <text class='card-date'>2017-12-11</text> <image class="card-img" src='https://m.360buyimg.com/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.360buyimg.com/mobilecms/s1125x549_jfs/t14860/139/504394142/191023/ca7c592e/5a2fcd75Ncde0d77d.jpg!q70.jpg", desc: "越努力越幸运。" }, { id: '2', title: "标题 222", date: "2017-12-12", image: "https://img1.360buyimg.com/da/jfs/t15013/308/338076309/180567/6cd6603d/5a2a466cNff568379.jpg", desc: "越努力越幸运。" }, { id: '3', title: "标题 333", date: "2017-12-12", image: "https://m.360buyimg.com/mobilecms/s1125x549_jfs/t14023/275/1983074516/150155/84e8e488/5a2f7a69N4292c954.jpg!q70.jpg", desc: "越努力越幸运。" }, { id: '4', title: "标题 444", date: "2017-12-12", image: "https://m.360buyimg.com/mobilecms/s1125x549_jfs/t15328/245/519883024/134960/eedef659/5a2f8103Nb5f6cbab.jpg!q70.jpg", desc: "越努力越幸运。" }, { id: '5', title: "标题 555", date: "2017-12-12", image: "https://m.360buyimg.com/mobilecms/s1125x549_jfs/t15328/245/519883024/134960/eedef659/5a2f8103Nb5f6cbab.jpg!q70.jpg", desc: "越努力越幸运。" }, { id: '6', title: "标题 666", date: "2017-12-12", image: "https://m.360buyimg.com/mobilecms/s1125x549_jfs/t15328/245/519883024/134960/eedef659/5a2f8103Nb5f6cbab.jpg!q70.jpg", desc: "越努力越幸运。" }, { id: '7', title: "标题 777", date:"2017-12-12", image:"https://m.360buyimg.com/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; }
