当前位置：首页 > uni-app

uniapp做段落评论

2026-03-05 10:12:31uni-app

实现段落评论功能

在UniApp中实现段落评论功能，需要结合前端页面布局、数据绑定和后端交互。以下是关键实现步骤：

页面结构设计 使用<view>和<scroll-view>组件构建评论区域，通过v-for循环渲染评论列表：

<view class="comment-section">
  <scroll-view scroll-y class="comment-list">
    <view v-for="(item,index) in commentList" :key="index" class="comment-item">
      <text class="comment-content">{{item.content}}</text>
      <view class="comment-meta">
        <text>{{item.author}}</text>
        <text>{{item.time}}</text>
      </view>
    </view>
  </scroll-view>
  <view class="input-area">
    <input v-model="newComment" placeholder="输入评论"/>
    <button @click="submitComment">提交</button>
  </view>
</view>

样式设置 通过CSS确保评论区域显示效果：

.comment-section {
  padding: 20rpx;
}
.comment-list {
  height: 500rpx;
}
.comment-item {
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
}
.comment-content {
  display: block;
  margin-bottom: 15rpx;
}

数据处理逻辑 在script部分实现数据绑定和提交功能：

export default {
  data() {
    return {
      commentList: [
        {content: '第一条评论内容', author: '用户A', time: '10:30'},
        {content: '第二条评论内容', author: '用户B', time: '11:15'}
      ],
      newComment: ''
    }
  },
  methods: {
    submitComment() {
      if(this.newComment.trim()) {
        this.commentList.unshift({
          content: this.newComment,
          author: '当前用户',
          time: new Date().toLocaleTimeString()
        })
        this.newComment = ''
      }
    }
  }
}

高级功能实现

分页加载 实现评论列表的分页加载功能：

loadMore() {
  uni.request({
    url: '你的API地址',
    data: {page: this.currentPage},
    success: (res) => {
      this.commentList = [...this.commentList, ...res.data.list]
      this.currentPage++
    }
  })
}

富文本支持 处理包含换行符的段落评论：

formatContent(content) {
  return content.replace(/\n/g, '<br/>')
}

用户交互优化 添加回复功能和点赞交互：

<view class="comment-actions">
  <text @click="replyTo(index)">回复</text>
  <text @click="likeComment(index)">点赞 {{item.likes}}</text>
</view>

后端对接方案

API接口设计 典型的评论接口需要包含：

获取评论列表：GET /comments
提交新评论：POST /comments
删除评论：DELETE /comments/:id

数据格式示例

{
  "id": 123,
  "content": "评论内容",
  "authorId": 456,
  "createTime": "2023-01-01T12:00:00",
  "likes": 5,
  "replies": []
}

本地存储方案 对于简单的应用，可以使用uni.setStorage暂存评论数据：

saveComments() {
  uni.setStorage({
    key: 'comments',
    data: this.commentList
  })
}

性能优化建议

虚拟列表技术 对于长列表使用uni-app的<recycle-list>组件：

<recycle-list :size="20" :total="commentList.length">
  <cell v-for="(item,index) in commentList" :key="index">
    <!-- 评论项内容 -->
  </cell>
</recycle-list>

图片懒加载 评论中的图片使用懒加载：

<image lazy-load mode="widthFix" :src="item.avatar"></image>

数据缓存策略 实现本地缓存与网络更新相结合的策略：

uniapp做段落评论

loadComments() {
  const cached = uni.getStorageSync('comments')
  if(cached) this.commentList = cached

  uni.request({
    url: '你的API地址',
    success: (res) => {
      this.commentList = res.data
      this.saveComments()
    }
  })
}