uni-app 实现文章评论展示 - 查看文章评论及内容

<template>
	<view>
		<view class="a">
			{{obj.title}}
		</view>
		<view class="b">
			{{obj.body}}
		</view>
		<view style="padding: 30rpx;">
			<view style="display: flex;justify-content: center;">
				评论
			</view>
			<view  v-for="item in comments" :key="item.id" >
			<view style="display: flex;justify-content: space-between;font-size: 10rpx;">
				<view>
					名称：{{item.name}}
				</view>
				<view>
					邮箱：{{item.email}}
				</view>
<pre><code>		&lt;/view&gt;
		&lt;view style=&quot;display: flex;justify-content: center;&quot;&gt;
			内容：{{item.body}}
		&lt;/view&gt;
		&lt;/view&gt;
	&lt;/view&gt;
&lt;/view&gt;
</code></pre>
</template>
<script>
	 export default {
		 data() {
			 return {
				 obj:{},
				 id:1,
				 comments:[]
			 };
		 },
		 onLoad(e){
			 this.id=e.ida
			 this.getdatil()
			 this.getcomment()
		 },
		 methods: {
			 getdatil(){
				 uni.showLoading({
					 title:"数据加载",
					 mask:true
				 })
				 uni.request({
					 url:"http://jsonplaceholder.typicode.com/posts/"+this.id,
				 success:res=>{
					 this.obj=res.data
				 },
				 complete:()=>{
					 uni.hideLoading()
				 }
				 })
				 
				 
				 
			 },
			 getcomment(){
				 uni.request({
					 url:`http://jsonplaceholder.typicode.com/posts/${this.id}/comments`,
					 success:res=> {
						 this.comments=res.data
					 }
				 })
			 }
		 }
		 }
</script>
<style>
.a{
	font-size: 40rpx;
	font-weight: 700;
	margin-bottom: 20px;
}
</style>