小程序加载详情页面并填充数据

问题

1.数据从哪里来？

从data.js中来

2.如何选择当前的数据

通过id号选择当前的数据

实训步骤

建立数据文件

vvar postList = [
  {  id:0,
    title: "2020LPL夏季赛季后赛观赛指南",
  content: "8月9号，LPL常规赛收官之战结束，在事关季后赛轮次的比赛中关键对局中，SN战胜了FPX，为本赛季常规赛画上句号。进入季后赛的战队依次为，TES、JDG、IG、SN、V5、LGD、WE、FPX",
  imgSrc: "/images/lpl.png"},
  {  id:1,
    title: "LPL2020夏季赛一阵阵容",
  content: "iG在本赛季大胆更换了下路组合，没有人料想到全新阵容能够迅速起飞，iG在常规赛中只输了两场比赛，队伍的整体状态非常出色。",
  imgSrc: "/images/bestplayers.png",},
  { id:2,
    title: "飞驰的人生",
  content: "《飞驰人生》应该是韩寒三部曲的第三部。从《后悔无期》到《乘风破浪》再到《飞驰人生》",
  imgSrc: "/images/jumpfly.png"
  }
]
export {
  postList
}

获取详情数据

通过id号，加载某一条id数据

post-detail.js:

// pages/post-detail/index.js
import {postList} from '../../data/data.js'
// console.log(postList)

Page({
  
  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  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，为本赛季常…此，可以对应各位选手的英雄池，对应各支战队的战术储备，漫长的季后赛，考验的就是各队适应版本的能力。", …}

填充页面

<view class="container">
      <image class="head-image" src="{{postData.imgSrc}}"></image>

      <text class="title">{{postData.title}}</text>      
  
      <text>{{postData.content}}</text>
</view>