uniapp项目的文章详情页的数据接收(day9)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

上几篇文章中我们完成了文章列表页面的所有功能以及样式，下拉刷新上拉加载更多删除文章等等的功能，接下来我们将完成点击文章跳转到文章详情页的数据接收以及数据的获取了。

• 接收列表页传过来的id值，在列表页跳转到详情页的uni.navigateTO方法中，我们在路径后面加上了id值，用来进入相应的详情页，然后在详情页我们如何获取呢？
• 我们需要在详情页的onLoad方法里面接收一个参数e，然后我们console.log打印一下e，结果如下图所示：

这样我们就接收到了文章列表页传来的id值 了，然后我们在这个页面全局定义一个options，用来接收这个e，然后在通过request发送get请求的时候携带这个options.id来获取到指定的文章内容，onLoad的具体代码如下所示：

onLoad(e) {
    console.log(e);
    this.options = e;
    this.getDetailData();
  },

• 然后我们需要定义一个detailNews的空数据用来接收获取到的文章数据，然后通过request发送get请求获取文章详情内容，将res.data赋值给this.detailNews，data中return的数据如下所示：

 return {
      detailNews: [],
      options: null,
    };

• 最后就是发送get请求获取文章详情数据了，这里需要传入刚刚获取到的options.id参数，具体的实现代码如下所示：

getDetailData() {
      uni.request({
        url: "http://localhost:3000/news",
        methods: "GET",
        data: {
          id: this.options.id,
        },
        success: (res) => {
          this.detailNews = res.data;
        },
      });
    },

然后这个获取数据的方法需要在页面刚加载的时候就调用，所以需要在onLoad里面调用一下这个方法，这样我们的数据就获取成功了。