小案例
在26节写了列表页面年部分，在这一节写跳转的detail部分，在detail部分是写一个页面，然后通过一个新的接口，获取新的数据，看起来和上一节的页面逻辑一模一样，但是有一个问题，这里获取到的就是一条数据，在前一个页面无论点哪一条数据进来，这里都是显示的这一条数据，这就需要带参数跳转，才能确认前一个页面对应到这个页面是哪一条数据
<template>
<view class="detail">
<view class="title">{{objData.title}}</view>
<view class="content">{{objData.body}}</view>
</view>
</template>
<script>
export default {
data() {
return {
objData:{}
};
},
onLoad() {
this.getDetail()
},
methods:{
getDetail(){
uni.request({
url:"http://jsonplaceholder.typicode.com/posts/1",
success:res=>{
this.objData = res.data
}
})
}
}
}
</script>
<style lang="scss">
.detail {
padding: 30rpx;
.title {
font-size: 46rpx;
color: #000;
padding-bottom: 20rpx;
}
.content {
font-size: 30rpx;
color: #666;
padding-bottom: 60rpx;
}
}
</style>
在列表页，无论点击哪一条数据进来，都是显示这个一条数据，因为只写了一个跳转，而且这一条数据本身就是在这个页面写的接口获取到的
先写一个加载提示框，再带数据传参，传参是list页面向detail页面传
先在标签的点击事件里，把要传的id带上item.id，然后在点击事件方法里接收这个值
<view class="row" v-for="item in listArr" :key="item.id" @click="clickItem(item.id)">
点击事件获取到的值,接口带的id是从1开始的
clickItem(e){
console.log(e);
uni.navigateTo({
url:"/pages/detail/detail"
})
}
在点击跳转的url后面把id拼接上去
clickItem(e){
console.log(e);
uni.navigateTo({
url:"/pages/detail/detail?id="+e
})
}
detail页面拿到id了
这个值在detail的onload里面能接收到
onLoad默认有一个Object类型的参数，是指其他页面打开当前页面所调用的 query 参数
onLoad(e) {
this.getDetail()
console.log(e);
},
这样就可以先在data中定义一个id，然后将onLoad方法中获取到的id赋值给它
onLoad(e) {
this.id = e.id
this.getDetail()
},
detail页面代码如下：
<template>
<view class="detail">
<view class="title">{{objData.title}}</view>
<view class="content">{{objData.body}}</view>
</view>
</template>
<script>
export default {
data() {
return {
objData:{},
id:1
};
},
onLoad(e) {
this.id = e.id
this.getDetail()
},
methods:{
getDetail(){
uni.showLoading({
title:"数据加载中...",
mask:true
})
uni.request({
url:"http://jsonplaceholder.typicode.com/posts/" + this.id,
success:res=>{
this.objData = res.data
},
// 无论接口是否调用成功,都隐藏掉加载提示框
complete: () => {
uni.hideLoading()
}
})
}
}
}
</script>
<style lang="scss">
.detail {
padding: 30rpx;
.title {
font-size: 46rpx;
color: #000;
padding-bottom: 20rpx;
}
.content {
font-size: 30rpx;
color: #666;
padding-bottom: 60rpx;
}
}
</style>
现在已经可以实现点击列表页的某一项，进入到detail之后是对应的内容
接下来在下面写评论区
评论区内容的接口不用双引号了，用ES6的模板字符串，模板字符串本身也是字符串，区别于普通字符串的最大特点是可以插入表达式，这样，就可以在接口url中动态的插入参数
详情和评论是分为两个接口分别拿到的数据，先获取哪一个接口数据根据需要进行判断，还可以先获取一个数据，然后另一个接口的数据获取就放在success里面，例如先拿详情，然后详情获取到之后，在success里再获取评论，这样比较合理
<template>
<view class="">
<view class="detail">
<view class="title">{{objData.title}}</view>
<view class="content">{{objData.body}}</view>
</view>
<view class="comment">
<view class="text">评论</view>
<!-- 评论内容每次获取到5条，遍历数组，渲染数据 -->
<view class="row" v-for="item in comments" :key="item.id">
<view class="top">
<view class="name">{{item.name}}</view>
<view class="mail">{{item.email}}</view>
</view>
<view class="body">{{item.body}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
objData:{},
id:1,
comments: []
};
},
onLoad(e) {
this.id = e.id;
// 获取内容详情方法
this.getDetail();
// 获取评论内容方法
this.getComments();
},
methods:{
getDetail(){
uni.showLoading({
title:"数据加载中...",
mask:true
})
uni.request({
url:"http://jsonplaceholder.typicode.com/posts/" + this.id,
success:res=>{
this.objData = res.data
},
// 无论接口是否调用成功,都隐藏掉加载提示框
complete: () => {
uni.hideLoading()
}
})
},
getComments(){
uni.request({
// 获取网络评论内容,使用模板字符串插入表达式--动态获取id
url:`http://jsonplaceholder.typicode.com/posts/${this.id}/comments`,
success:res => {
// 获取到的评论内容绑定到data
this.comments = res.data
}
})
}
}
}
</script>
<style lang="scss">
.detail {
padding: 30rpx;
.title {
font-size: 46rpx;
color: #000;
padding-bottom: 20rpx;
}
.content {
font-size: 30rpx;
color: #666;
padding-bottom: 60rpx;
}
}
.comment{
padding: 30rpx;
background: #f8f8f8;
.text {
font-size: 46rpx;
margin-bottom: 30rpx;
}
.row {
border-bottom: 1px solid #e8e8e8;
padding: 20rpx 0;
.top {
display: flex;
justify-content: space-between;
font-size: 22rpx;
color: #999;
padding-bottom: 15rpx;
}
.body {
font-size: 28rpx;
color: #555;
}
}
}
</style>
