小程序:加载详情数据并填充页面
来自CloudWiki
问题
1.数据从哪里来?
从data.js中来
2.如何选择当前的数据
通过id号选择当前的数据
实训步骤
建立数据文件
var postList = [ { title: "2020LPL夏季赛季后赛观赛指南", content: "8月9号,LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中,SN战胜了FPX,为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG、SN、V5、LGD、WE、FPX", imgSrc: "/images/lpl.png", reading: 102, detail: "8月9号,LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中,SN战胜了FPX,为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG、SN、V5、LGD、WE、FPX。既有传统四强,又有新崛起的黑马。本文主要是从上路的大改动展开,引发对所有其他的影响。牵一发而动全身,上路一旦回归carry上单版本,对野区和中路的影响是显而易见的。而下路在艾希大砍一刀之后,女警的过于强势,使她只能出现在BAN位上,因此主流下路还是会回归功能性下路英雄。由此,可以对应各位选手的英雄池,对应各支战队的战术储备,漫长的季后赛,考验的就是各队适应版本的能力。", collection: 92, dateTime: "24小时前", headImgSrc: "/images/lpl.png", author: "猫是猫的猫", date: "Nov 20 2020", avatar: "/images/avatar/5.png", postId: 0, music: { url: "http://music.163.com/song/media/outer/url?id=1372060183.mp3", title: "空-徐海俏", coverImg: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002sNbWp3royJG_1.jpg?max_age=2592000", } }, { date: "Sep 18 2020", title: "正是虾肥蟹壮时", imgSrc: "/images/post/crab.png", avatar: "/images/avatar/1.png", content: "菊黄蟹正肥,品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,", reading: "112", collection: "96", headImgSrc: "/images/post/crab.png", author: "林白衣", dateTime: "24小时前", detail: "菊黄蟹正肥,品尝秋之味。徐志摩把“看初花的荻芦”和“到楼外楼吃蟹”并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,壳凸红脂块块香”;在《世说新语》里,晋毕卓更是感叹“右手持酒杯,左手持蟹螯,拍浮酒船中,便足了一生矣。”漫漫人生长路,美食与爱岂可辜负?于是作为一个吃货,突然也很想回味一下属于我的味蕾记忆。记忆中的秋蟹,是家人的味道,弥漫着浓浓的亲情。\n\n是谁来自山川湖海,却囿于昼夜,厨房与爱? 是母亲,深思熟虑,聪明耐心。吃蟹前,总会拿出几件工具,煞有介事而乐此不疲。告诉我们螃蟹至寒,需要佐以姜茶以祛寒,在配备的米醋小碟里,亦添入姜丝与紫苏,前者驱寒后者增香。泡好菊花茶,岁月静好,我们静等。", postId: 1, music: { url: "http://music.163.com/song/media/outer/url?id=1386866050.mp3", title: "笑看风云", coverImg: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002sNbWp3royJG_1.jpg?max_age=2592000" } }, { //按住alt + shift + F 可以格式化代码样式 title: "当我们在谈论经济学时,我们在谈论什么?", content: "引言在我跟学生课后交流时,以及我在知乎上阅读有关“经济”问题的论题时,经常会遇到这样的情况:...", detail: "1 引言\n\n在我跟学生课后交流时,以及我在知乎上阅读有关“经济”问题的论题时,经常会遇到这样的情况:有些人套用“经济理论“的知识去解释现实中发生的经济事件,结果发现很多事情讲不通,或者发现”理论告诉我们的“与现实发生的是相反的。也有学生经常跟我说:经济学有什么用?为了说明这个,我经常从两个方面来进行解释,尝试用我个人所擅长的解决问题的视角和他们能够听懂的方法来说明经济学是什么,它的作用边界在哪里:\r\n\n2 ”简笔素描“与”油画肖像“我们给人画肖像画,可以用简笔素描,也可以用油画肖像。油画肖像可以在最大程度上保存了人物的各方面的细节和特点,而简笔素描则忽略了很多细节。尽管简笔素描忽略了人物的许多细节,但我们仍旧能够很容易的认出画中的人物是谁。为什么?因为这种方法保留了人物最显著的特征,以至于我们可以忽略其次要特征而对人物做出判定。\n\n2.1 ”简笔素描“对于绝大多数的非经济学专业大众而言(经济学相关专业硕士学历以上),人们所接触到的经济学都是初级微观经济学。所谓的初级微观经济学,对于经济问题的”画法“就是一种”简笔素描“。比如初级微观经济学教材中广为使用的这种一元一次需求函数:y=bx+a,需求量的唯一变量是产品价格。但仅凭直觉我们就可以断言,现实中影响需求量的因素绝不止价格这一种,因此我们可以认为这个模型对经济问题的描述是失真的。然而但这种失真却是必要的和有意义的,其意义在与它利于揭示价格对于需求的影响,而不在于否定影响需求的其他因素——", imgSrc: "/images/post/sls.jpg", headImgSrc: "/images/post/sls.jpg", reading: 62, collection: 92, author: "知乎", date: "Nov 12 2020", dateTime: "三天前", avatar: "/images/avatar/3.png", postId: 2, music: { url: "http://music.163.com/song/media/outer/url?id=30031580.mp3", title: "原来你也在这里-秦昊", coverImg: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002sNbWp3royJG_1.jpg?max_age=2592000" } }, { title: "LPL2020夏季赛一阵阵容", content: "iG在本赛季大胆更换了下路组合,没有人料想到全新阵容能够迅速起飞,iG在常规赛中只输了两场比赛,队伍的整体状态非常出色。", imgSrc: "/images/bestplayers.png", reading: 102, detail: "iG在本赛季大胆更换了下路组合,没有人料想到全新阵容能够迅速起飞,iG在常规赛中只输了两场比赛,队伍的整体状态非常出色。Puff和Southwind的到来,为iG带来了全新的战术打法,而Rookie和TheShy的发挥一如既往稳定。作为世界冠军和LPL卫冕冠军,FPX在本赛季保持了稳定的发挥,Khan和GimGoon轮番上阵,为FPX带来了不同的战术部署。如今的FPX打法非常多变,上中下都能够成为carry的战术点,加上Tian的前期积极进攻,整支队伍在对线方面得到了相当程度的提升。FPX渴望延续良好表现,捍卫他们的冠军头衔。", collection: 26, dateTime: "24小时前", headImgSrc: "/images/bestplayers.png", author: "深白色", date: "Nov 20 2016", avatar: "/images/avatar/3.png", postId: 3, music: { url: "http://music.163.com/song/media/outer/url?id=1334295185.mp3", title: "写给黄淮-邵帅", coverImg: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002sNbWp3royJG_1.jpg?max_age=2592000" } }, { title: "飞驰的人生", content: "《飞驰人生》应该是韩寒三部曲的第三部。从《后悔无期》到《乘风破浪》再到《飞驰人生》", imgSrc: "/images/jumpfly.png", reading: 96, detail: "《飞驰人生》应该是韩寒三部曲的第三部。从《后悔无期》到《乘风破浪》再到《飞驰人生》,故事是越讲越直白,也越来越贴近大众。关于理想、关于青春永远是韩寒作品的主题。也许生活确实像白开水,需要一些假设的梦想,即使大多数人都不曾为梦想努力过,但我们依然爱看其他人追梦,来给自己带来些许的慰藉。", collection: 26, dateTime: "21小时前", headImgSrc: "/images/jumpfly.png", author: "深白色", date: "Nov 20 2016", avatar: "/images/avatar/5.png", postId: 4, music: { url: "http://music.163.com/song/media/outer/url?id=1344368486.mp3", title: "奉献-韩寒", coverImg: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002sNbWp3royJG_1.jpg?max_age=2592000" } }, ] export { postList } // module.exports = { // postList:local_database // } // javascript 模块 // this.setData // 导入 导出 // JS 模块导入导出
获取详情数据
通过id号,加载某一条id数据
post-detail.js:
import {postList} from '../../data/data.js' console.log(postList) ... /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //console.log(options) const postData = postList[options.pid] console.log(postData) this.setData({ postData }) },
输出:
{title: "2020LPL夏季赛季后赛观赛指南", content: "8月9号,LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中,SN战胜了FPX,为本赛季常规赛画上句号。进入季后赛的战队依次为,TES、JDG、IG、SN、V5、LGD、WE、FPX", imgSrc: "/images/lpl.png", reading: 102, detail: "8月9号,LPL常规赛收官之战结束,在事关季后赛轮次的比赛中关键对局中,SN战胜了FPX,为本赛季常…此,可以对应各位选手的英雄池,对应各支战队的战术储备,漫长的季后赛,考验的就是各队适应版本的能力。", …}
填充页面
<!--pages/post-detail/post-detail.wxml--> <view class="container"> <image class="head-image" src="{{postData.imgSrc}}"></image> <view class="author-date"> <image class="avatar"src="{{postData.avatar}}"></image> <text class="author">{{postData.author}}</text> <text class="const-text">发表于</text> <text class="date">{{postData.dateTime}}</text> </view> <text class="title">{{postData.title}}</text> <view class="tool"> <view class="circle"> <image class="share-img" src="/images/icon/share.png"></image> <image src="/images/icon/collection.png"></image> </view> <view class="horizon"></view> </view> <text>{{postData.detail}}</text> </view>