Uni-app评论展示页面 - 查看文章评论 | Uni-app教程
<p>"<template>\n\t<view>\n\t\t<view class="a">\n\t\t\t{{obj.title}}\n\t\t</view>\n\t\t<view class="b">\n\t\t\t{{obj.body}}\n\t\t</view>\n\t\t<view style="padding: 30rpx;">\n\t\t\t<view style="display: flex;justify-content: center;">\n\t\t\t\t评论\n\t\t\t</view>\n\t\t\t<view v-for="item in comments" :key="item.id" >\n\t\t\t<view style="display: flex;justify-content: space-between;font-size: 10rpx;">\n\t\t\t\t<view>\n\t\t\t\t\t名称\n\t\t\t\t</view>\n\t\t\t\t<view>\n\t\t\t\t\t邮箱\n\t\t\t\t</view>\n\t\t\t\t\n\t\t\t</view>\n\t\t\t<view style="display: flex;justify-content: center;">\n\t\t\t\t内容\n\t\t\t</view>\n\t\t\t</view>\n\t\t</view>\n\t</view>\n</template>\n\n<script>\n\texport default {\n\tdata() {\n\t\treturn {\n\t\t\tobj:{},\n\t\t\tid:1,\n\t\t\tcomments:[]\n\t\t};\n\t},\n\tonLoad(e){\n\t\tthis.id=e.ida\n\t\tthis.getdatil()\n\t\tthis.getcomment()\n\t},\n\tmethods: {\n\t\tgetdatil(){\n\t\t\tuni.showLoading({\n\t\t\t\ttitle:"数据加载",\n\t\t\t\tmask:true\n\t\t\t})\n\t\t\tuni.request({\n\t\t\t\turl:"http://jsonplaceholder.typicode.com/posts/" + this.id,\n\t\t\t\tsuccess:res=>{\n\t\t\t\t\tthis.obj=res.data\n\t\t\t\t},\n\t\t\t\tcomplete:()=>{\n\t\t\t\t\tuni.hideLoading()\n\t\t\t\t}\n\t\t\t})\n\t\t\t\n\t\t\t\n\t\t},\n\t\tgetcomment(){\n\t\t\tuni.request({\n\t\t\t\turl:`http://jsonplaceholder.typicode.com/posts/${this.id}/comments`,\n\t\t\t\tsuccess:res=> {\n\t\t\t\t\tthis.comments=res.data\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t}\n\t}</script>\n\n<style>\n.a{\n\tfont-size: 40rpx;\n\tfont-weight: 700;\n\tmargin-bottom: 20px;\n}\n</style>\n\n为什么页面是只显示评论两个字，名称邮箱内容都不显示内容：根据提供的代码，页面只显示了评论两个字而不显示其他内容，有可能是以下原因导致：\n\n1. 数据获取失败：在<code>getdatil()</code>和<code>getcomment()</code>方法中，通过<code>uni.request</code>发送请求获取数据，可能由于网络问题或接口返回错误导致数据获取失败。可以在控制台输出<code>res.data</code>查看返回的数据是否正确。\n\n2. 数据未正确绑定：在模板中使用<code>{{obj.title}}</code>和<code>{{obj.body}}</code>来显示标题和内容，需要确保<code>obj</code>对象中的<code>title</code>和<code>body</code>属性的值已经正确赋值。可以在<code>getdatil()</code>方法中使用<code>console.log(this.obj)</code>来查看<code>obj</code>对象是否获取到了正确的值。\n\n3. 循环遍历未正确渲染：在评论列表的循环遍历中使用了<code>v-for=\"item in comments\"</code>，并且为每个评论设置了唯一的<code>key</code>属性。需要确保<code>comments</code>数组中包含正确的评论数据，并且循环遍历的部分也正常渲染。可以在<code>getcomment()</code>方法中使用<code>console.log(this.comments)</code>来查看<code>comments</code>数组是否包含正确的评论数据。\n\n如果以上检查都正常，但仍然无法显示评论的其他内容，可能是由于样式问题导致内容被隐藏或覆盖。可以检查相关样式设置，例如字体颜色、背景色、宽高等是否正确设置。</p>
原文地址: https://www.cveoy.top/t/topic/p4Vp 著作权归作者所有。请勿转载和采集!