<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>
Uni-app评论功能实现教程:使用JSON Placeholder API展示评论数据

原文地址: https://www.cveoy.top/t/topic/p4Vm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录