(二十四)、实现评论功能（4）【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

飞熊 • 2023年4月20日上午9:44 • 后端笔记 • 阅读 159

1，创建reply回复页面

1.1 在comment-item子组件中添加click

<view class="comment-item" @click="goReply">

1.2 methods中添加点击跳转回复页面的方法

      //跳转去回复页面
      goReply() {
        uni.navigateTo({
          url: "/pages/reply/reply"
        })
      },

1.3 阻止事件冒泡 .stop跳转到回复页面

在comment-item中，删除评论按钮的click中加入.stop来阻止事件冒泡：

 <text class="iconfont icon-a-43-guanbi" @click.stop="delComment"></text>

2，reply页面完善

<template>
  <view class="reply">
    <view class="top">
      <comment-item></comment-item>
    </view>
    <view class="list">
      <view class="row" v-for="item in 3">
        <comment-item></comment-item>
      </view>
    </view>

    <view>
      <comment-frame>
      </comment-frame>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .reply {
    .top {
      padding: 30rpx;
      border-bottom: 15rpx solid #eee;
    }

    .list {
      padding: 30rpx;
      padding-bottom: 120rpx;

      .row {
        padding-bottom: 15rpx;
      }
    }
  }
</style>

3，介绍3种不同类型的页面跳转传参方式

3.1 通过url传递id到新页面，然后在新页面中通过接收i到的id发送网络请求查询数据库

3.2 通过url传递整个所需对象，需要用JSON.stringify()和JSON.parse(）

3.3 通过本地缓存来实现两个页面之间的数据交互

本项目采用第三种方式：

在comment-item中

uni.setStorageSync("replyItem", this.item)

在reply页面中：

    onLoad(e) {
      let replyItem = uni.getStorageSync("replyItem");
      if (!replyItem) return uni.navigateBack();
      this.replyItem = replyItem || {}

    },
    onUnload() {
      uni.removeStorageSync("replyItem")
    },