【页面案例汇总】刷题uni-app小程序页面

代码示例：

1. 页面结构：

<template>
  <div class="comment-container">
    <!-- 评论区头部 -->
    <div class="comment-header">
      <span class="iconfont icon-comment"></span>
      <span class="comment-count">{
   
   { commentCount }}条评论</span>
    </div>

    <!-- 单独的评论 -->
    <div class="comment-item" v-for="comment in comments" :key="comment.id">
      <div class="comment-content">{
   
   { comment.content }}</div>
      <div class="comment-reply">
        <div class="reply-item" v-for="reply in comment.replies" :key="reply.id">
          <span class="reply-nickname">{
   
   { reply.nickname }}</span>
          <span class="reply-content">{
   
   { reply.content }}</span>
        </div>
        <!-- 回复框 -->
        <div class="reply-input">
          <input type="text" placeholder="回复 {
   
   { comment.nickname }}">
          <button>回复</button>
        </div>
      </div>
    </div>
  </div>
</template>

2. 页面数据：

<script>
export default {
  data() {
    return {
      commentCount: 10, // 评论数目
      comments: [
        {
          id: 1,
          nickname: "张三",
          content: "这篇文章写得真好！",
          replies: [
            {
              id: 11,
              nickname: "小红",
              content: "是啊，我也觉得写得很好！"
            }
          ]
        },
        {
          id: 2,
          nickname: "李四",
          content: "不太同意，觉得有些地方可以改进。",
          replies: []
        }
      ]
    };
  }
};
</script>

3. 页面样式：

<style scoped>
.comment-container {
  padding: 16px;
  background-color: #ffffff;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.comment-header .iconfont {
  font-size: 18px;
  color: #ff4d4f;
  margin-right: 8px;
}

.comment-count {
  font-size: 14px;
  color: #8c8c8c;
}

.comment-item {
  margin-bottom: 16px;
}

.comment-content {
  font-size: 16px;
  color: #333333;
  margin-bottom: 8px;
}

.comment-reply {
  padding-left: 16px;
  border-left: 2px solid #f0f0f0;
}

.reply-item {
  font-size: 14px;
  color: #666666;
  margin-bottom: 8px;
}

.reply-nickname {
  color: #ff4d4f;
  margin-right: 6px;
}

.reply-content {
  margin-left: 6px;
}

.reply-input {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.reply-input input {
  flex: 1;
  height: 30px;
  padding: 0 8px;
  font-size: 14px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  margin-right: 8px;
}

.reply-input button {
  height: 30px;
  font-size: 14px;
  background-color: #ff4d4f;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0 12px;
  cursor: pointer;
}
</style>

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果私信未回复，可添加学习会员小助手咨询（微信：mifankeji77）