微信小程序新闻列表详情页

color: #666;

}

.const-text{

font-size: 24rpx;

color: #999;

margin-left: 20rpx;

}

.date{

font-size: 24rpx;

color: #999;

margin-left: 20rpx;

vertical-align: middle;

}

.title{

margin-left: 40rpx;

font-size: 36rpx;

font-weight: 700;

margin-top: 30rpx;

letter-spacing: 2px;

color: #ab556c;

}

.tool{

margin-top: 20rpx;

}

.cicle-img{

float: right;

margin-right: 40rpx;

vertical-align: middle;

}

.cicle-img image{

width: 90rpx;

height: 90rpx;

}

.share-img{

margin-left: 30rpx;

}

.horizon{

width: 660rpx;

height: 1px;

background-color: #e5e5e5;

vertical-align: middle;

position: relative;

top: 46rpx;

margin: 0 auto;

z-index: -99;

}

.detail{

color: #666;

margin-left: 30rpx;

margin-top: 20rpx;

margin-right: 30rpx;

line-height: 44rpx;

letter-spacing: 2px;

}

app.js 文件

text{

/* 设置字体 */

font-family: MicroSoft Yahei;

font-size: 24rpx;

}

post-detail.json 文件

{

“navigationBarTitleText”: “阅读”

}

app.json 文件

{

“pages”: [

“pages/welcome/welcome”,

“pages/posts/post”,

“pages/posts/post-detail/post-detail”

],

“window”: {

“navigationBarBackgroundColor”: “#405f80”

}

}

post.json 文件

{

“navigationBarTitleText”: “文与字”

}

　　　　

向静态详情页面添加动态数据

---

详情页会出现列表页所没有的数据，例如头图片、详细内容、发表时间等，所以我们要在 posts-data.js 文件中添加这些数据。

posts-data.js 文件

var local_database = [{

date: “Sep 18 2018”,

title: ‘不忘初心，方得始终’,

content: ‘从开始时我们彼此都有着无比美好的心灵，只是到最后我们都发现这个世界并非我们想得那么好，于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时，我们才突然回想到我们的初心早以不见。’,

reading: ‘112’,

collection: ‘64’,

headImgSrc: ‘/images/04.jpg’,

author: ‘J_King’,

dateTime: ‘21小时前’,

detail: ‘你要学会控制自己对他的想念，你要告诉自己李春蕾其实他没有那么爱你，你不需要为他付出在意他什么，因为他和你没有任何血缘关系，你需要的是每天想办法怎么卖出去一台手机，如何过成自己想要的模样，可是，任时光匆匆流逝不忘初心的我，却只想在乎你，加油！你会成功活出像王菲那样的生活。不忘初心，方得始终；放任潇洒，终成无畏！我要的很简单，可是却得不到。新的一年，我放弃所有。开始拼命工作，不为别的只为麻痹自己，填补自己所有的时间。世界有太多不幸，可能我的不幸就是把一些东西看的太重，另一些东西看的不那么重。平衡一切，只为自己，不忘初心……不忘初心，方得始终。凝望岁月河流中的那一世繁华如梦的过往，岁月无情，人有情，每张照片的背后，仿佛都在讲述着一段故事。尤其是老照片，更是岁月留在某一刻留下的印记，让人产生时空穿越的感觉，伴有无尽的遐想与回忆。看照片是拼接历史的变迁，是幸福的延续，历程的封存，青春的记录。无论是闻名于世的伟人，还是渺小的小人物，每张照片都是我们回不去的曾经。’,

// 嵌套

img: {

imgSrc: ‘/images/04.jpg’,

avatar: ‘/images/1.jpg’,

},

img_condition: true,

postId: 0,

},

{

date: “Nav 16 2018”,

title: ‘初心易得，始终难守’,

content: ‘有时候人就是这样，遇到再大的事儿自己扛，忍忍就过去了，可听到身旁的人一句安慰就瞬间完败。于是后来才明白，我们怕的不是冷漠 ，怕的是突然的温柔。怕的不是自己吃苦，怕的是身边的人为你难过。怕的不是孤独，怕的是辜负。’,

reading: ‘256’,

collection: ‘151’,

headImgSrc: ‘/images/05.jpg’,

author: ‘J_King’,

dateTime: ‘10小时前’,

detail: ‘几乎每个人都听过“不忘初心，方得始终”，却少有人知道下一句“初心易得，始终难守”。我所有的自负都来自我的自卑， 所有的英雄气概都来自于我内心的软弱， 所有的振振有词都因为心中满是怀疑。 我假装无情，其实是痛恨自己的深情。这世界没有一件事情是虚空而生的，站在光里，背后就会有阴影，这深夜里一片寂静，是因为你还没有听见声音。我知道黄昏正在转瞬即逝，黑夜从天而降了。我看到广阔的土地袒露着结实的胸膛，那是召唤的姿态，就像女人召唤着她们的儿女，土地召唤着黑夜来临。’,

// 嵌套

img: {

imgSrc: ‘/images/05.jpg’,

avatar: ‘/images/1.jpg’,

},

img_condition: true,

postId: 1,

},

{

date: “Nav 19 2018”,

title: ‘向死而生’,

content: ‘我希望跟我有缘的人能够跟我一样感恩这样美好的缘分，对未来有很多乐观正面的思考，那该有多么好！而且，只要好好体验人生、享受世界的真善美，让自己的生命不断升华成长，不必留下什么，这个世界就会因你而芬芳。若真要留下什么，那就是留下我们的孩子。如果真要衡量什么，一个善良的后代，能带给世界的正面影响，一定会超过邪恶的人。’,

reading: ‘256’,

collection: ‘11’,

headImgSrc: ‘/images/06.jpg’,

author: ‘J_King’,

dateTime: ‘6小时前’,

detail: ‘有一种活法，叫“向死而生”！世界上有两条路，一条有形的横着供人前行徘徊或倒退，一条无形的竖着供灵魂升入天堂或下地狱。只有在横着的路上踏遍荆棘而无悔，方可在竖着的路上与云霞为伍。过去都是假的，回忆是一条没有归途的路，以往的一切春天都无法复原，即使最狂热最坚贞的爱情，归根结底也不过是一种瞬息即逝的现实，唯有孤独永恒。人永远都无法知道自己该要什么，因为人只能活一次，既不能拿它跟前世相比，也不能在来生加以修正。没有任何方法可以检验哪种抉择是好的，因为不存在任何比较。一切都是马上经历，仅此一次，不能准备。每一个不曾起舞的日子，都是对生命的辜负。现在每个我遇见的笑着的人，他们都不曾因为苦而放弃，他们只因扛而成长。谁不希望自己活得轻松，没有压力，一切随性，但如果你真的那样去做的话，你会发现这个世界都在和你作对。如果有一天你真的觉得自己轻松了，那也不是因为生活越来越容易了，而是因为我们越来越坚强。’,

// 嵌套

img: {

imgSrc: ‘/images/06.jpg’,

avatar: ‘/images/1.jpg’,

},

img_condition: true,

postId: 2,

},

{

date: “Aue 05 2018”,

title: ‘缘分’,

content: ‘其实，同窗或者同事的缘分，都是有时尽的，如果你从中把个别人变成了一生挚爱或者挚友，缘分会稍长一点，但我们大部分人都只是萍水相逢短暂共处的缘分。这就是人生。’,

reading: ‘356’,

collection: ‘122’,

headImgSrc: ‘/images/07.jpg’,

author: ‘J_King’,

dateTime: ‘3小时前’,

detail: ‘当你开始喜欢一个人的时候，你会觉得ta是这个世界上最美的，你会自作多情地认为，你与ta之间所有细小的互动，都是上天安排好的，似乎从此，人间剧本全为你我而写。缘，似 乎来 了。 但 很多事往往是那么发展，缘有了，情分没到，缘分不是坐等的。缘可以让上天安排，情分却是要靠自己攒的。 一些人总是抱怨有缘无份，是因为他们把命运想得太简单了。 这世上的缘分，没有早一秒，没有晚一秒，只有在那一瞬间，我看着你的时候，你也认出来我！爱情如此，亲情亦如此。 缘分，是你兜兜转转几个圈时，还是摆脱不掉的宿命。其实怕的不是两人不同心，而是怕心里想的都一样，我自问我凭什么配得上你，你疑惑你凭什么搭得上我，于是就这样错过了缘分，错过了爱情。所谓的缘分，说起来只是简单的两个字，只是绝大多数时候都被拆开。一缘字，这世上千万人与我相遇，一分字，即是擦肩。唯那几人相遇而识，又唯那千万分之一的运气才是缘分 使然 ，遇 见 而不忘，长留心中。而更要多少的缘分才让两心都是如此，才能，相思，相念。’,

// 嵌套

img: {

imgSrc: ‘/images/07.jpg’,

avatar: ‘/images/1.jpg’,

},

img_condition: true,

postId: 3,

},

{

date: “Nov 17 2018”,

title: ‘相遇’,

content: ‘当有两颗尘埃在这个宇宙里接近、相遇后分开，它们各自迎向前方无境的黑暗，也就再也不可能碰到一起。尽管说不清，是在这之前，从无限大的宇宙中以无限小的几率碰到一起更温暖；还是在这之后，在无限大的宇宙中以同样无限远的时间分离更无奈。’,

reading: ‘116’,

collection: ‘75’,

headImgSrc: ‘/images/08.jpg’,

author: ‘J_King’,

dateTime: ‘1小时前’,

detail: ‘我和他都这样可怜，在命运的起伏中跌跌撞撞，一路走来，我终于是失去他，而他也终于没有能够抓紧我的手。不是我们爱得不够，只是我们的时间总是太少，我们相遇的太早，那时候我们不懂得珍惜。等我们知道对方对于自己的重要，却已经再也找不到机会。这世上的事情，都没有办法重来一次。愿你能够明白，世上所有的相遇都有它的意义。正是因为一路上失去太多，才会更加珍惜现在的所得；正是因为经历了这些，才能学会沉淀，才能变得不再患得患失，不再无理取闹。有些人遇见了总有告别的时候，这或许就是你们相遇的意义。就是因为有了这个人的出现，才有了现在的。那个在不经意中，也许就改变了我一生的男孩。我相信总有一天，我们会在世界的屋顶再次相遇。 不要轻易用过去来衡量生活的幸与不幸，每个人的生命都是可以绽放美丽的，只要你珍惜。我的未来已经无法和你再走在一起了，就算我们相遇了，对你而言也不会是幸福吧，所以我想要活下去，只是想要守护着你，像幽灵一般的存在。世界上哪有那么多的不期而遇，只不过是其中一个人苦苦的等待罢了···’,

// 嵌套

img: {

imgSrc: ‘/images/08.jpg’,

avatar: ‘/images/1.jpg’,

},

img_condition: true,

postId: 4,

}

]

// 给脚本文件定义一个出口

module.exports = {

postList: local_database

}

在 post.js 文件中的打开新闻详情页面的事件中，将点击新闻的id传到新页面。

修改post.js文件新闻详情页的点击事件

// 打开新闻详情页事件

onPostTap:function(event){

// 获取新闻的postId

var postId = event.currentTarget.dataset.postid;

// 跳转到子页面，新闻详情界面

wx.navigateTo({

// 将新闻块的postid穿进去

url: ‘post-detail/post-detail?id=’+postId,

})

},

在新闻详情页的界面接收到传进的参数，拿到相应的数据，进行数据绑定。

post-detauk.js 文件

// 定义一个变量来接受 posts_data.js文件输出的对象

// 注意：require 只能使用相对