【页面案例汇总】微信小程序论坛讨论页面

<template>
  <view class="container">
    <view class="header">{{ post.title }}</view>
    <view class="content">{{ post.content }}</view>
    <view class="comments">
      <view v-for="comment in comments" :key="comment.id" class="comment">
        <view class="username">{{ comment.username }}</view>
        <view class="text">{{ comment.text }}</view>
      </view>
    </view>
    <view class="add-comment">
      <input v-model="newComment" placeholder="发表评论" />
      <button @click="addComment">发表</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      post: {
        title: "这是一个讨论帖子",
        content: "这是帖子的内容，大家可以在评论区讨论。",
      },
      comments: [
        { id: 1, username: "Alice", text: "非常好的帖子！" },
        { id: 2, username: "Bob", text: "同意楼上的观点！" },
      ],
      newComment: "",
    };
  },
  methods: {
    addComment() {
      const newId = this.comments.length + 1;
      this.comments.push({
        id: newId,
        username: "匿名用户",
        text: this.newComment,
      });
      this.newComment = "";
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.header {
  font-size: 24px;
  font-weight: bold;
}

.content {
  margin-top: 20px;
  line-height: 1.5;
}

.comments {
  margin-top: 20px;
  width: 100%;
}

.comment {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.username {
  font-weight: bold;
}

.add-comment {
  margin-top: 20px;
  display: flex;
}

input {
  flex-grow: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

在这个示例中，我们使用了uniapp的模板语法来动态渲染帖子的标题、内容和评论列表，并使用v-for指令遍历评论列表中的每个评论，并使用v-model指令绑定用户输入的新评论内容。同时，我们还定义了一个addComment方法，在用户点击“发表”按钮时添加新评论到评论列表中。最后，我们使用了uniapp的样式语法来美化页面的布局和样式。