uniapp小實例-新聞列表及詳情

首先新建詳情info文件夾及info.vue文件，然后在index頁寫列表部分代碼：

<template>
    <view class="content">
    <navigator class="newslist" :url="'../info/info?threadid=' + item.threadid"
            v-for="item in newslist" :key="item.threadid">
        <image src="../../static/logo.png" mode="widthFix"></image>
        <view class="news-title">{{item.title}}</view>
    </navigator>
    </view>
</template>

<script>
var that;
export default {
  data() {
    return {
        newslist: []
    }
  },
  onLoad() {
    that = this;
    this.getNews();
    },
  methods: {
    getNews() {
      uni.request({
        url:'https://www.easy-mock.com/mock/5d3914e09388917915bccb2e/shopapp/uniapp/newslist',
        method: 'GET',
        header: {'content-type': 'application/x-www-form-urlencoded'}, 
        success(res) {
            console.log(res);
            that.newslist = res.data.data;
        }
      })
    }
  },
}
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.newslist{display: flex;width: 94%;padding:10upx 3%;margin:12upx 0;}
.newslist image{width: 200upx;margin-right: 12upx;flex-shrink: 0;}
.news-title{width:100%;font-size: 28upx;}
</style>

然后info.vue頁，接收列表頁傳過來的參數：

onLoad(options) {
    console.log(options.threadid)
},

然后通過這個參數請求詳情的接口就可以得到數據了。

var that;
export default {
  data() {
    return {
        title: ''
    }
  },
  onLoad(options) {
    that = this;
    console.log(options.threadid)
    uni.request({
      url: '../home/getnoticeinfo',
      data: {
        threadid:options.threadid
      },
      success(res) {
        console.log(res);
        that.title = res.data.data.title;
      }
    })
  }
}