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

news2024/11/24 4:39:38

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")
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/365776.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux 基础知识之权限管理

目录一、权限的认识二、用户切换三、文件权限1.三类文件访问者2.文件权限类型3.文件访问权限4.文件权限值表示一、权限的认识 权限是对用户所能进行的操作的限制&#xff0c;如果不对用户作出限制&#xff0c;那么碰到恶意用户&#xff0c;就会损害其他用户的利益。 Linux是多用…

最新文件快递柜系统网站源码-Fastapi+Sqlite3+Vue2+ElementUI-简洁好用

## 主要特色 - [x] 轻量简洁:Fastapi+Sqlite3+Vue2+ElementUI - [x] 轻松上传:复制粘贴,拖拽选择 - [x] 多种类型:文本,文件 - [x] 防止爆破:错误次数限制 - [x] 防止滥用:IP限制上传次数 - [x] 口令分享:随机口令,存取文件,自定义次数以及有效期 - [x] 匿名分享:无…

机器学习算法竞赛实战:如何看到机器学习竞赛问题?

机器学习算法竞赛实战-竞赛问题建模 更新《机器学习算法竞赛实战》一书的阅读笔记&#xff0c;更多详细的内容请阅读原书。本文的主要内容包含&#xff1a; 竞赛问题的3个主要部分-如何理解竞赛问题机器学习的样本选择如何线下评估模型实战案例 公众号&#xff1a;尤而小屋作…

scheduling Request(SR)

欢迎关注同名微信公众号“modem协议笔记”。 UE上报BSR&#xff0c;期望网络参照BSR&#xff0c;下发UL grant给UE以便发送UL data&#xff0c;正常情况下&#xff0c;整个过程都会比较顺利。但是世事难料&#xff0c;网络难免有自己的小脾气或者发送BSR不太顺畅&#xff0c;导…

通过Buildroot自制根文件系统

前言根文件系统是Linux内核启动之后读取的一个文件系统&#xff0c;并从这个文件系统中加载第一个init应用程序并启动&#xff0c;就是Linux上俗称的root进程、根进程制作它的方式有很多&#xff0c;例如busybox、yocto&#xff0c;但是这两个方式有缺点&#xff0c;第一个是bu…

JVM级别内存屏障如何禁止指令重排序的

承接上文证明CPU指令是乱序执行的当多个cpu访问同一份数据的时候怎么保证数据的一致性&#xff1f;在最底层级别的控制有好多种&#xff1a;第一种叫关中断&#xff0c;就是访问任何数据的时候必须有一个中断信号量的存在。很多传统的cpu就是靠它实现的&#xff0c;从内存读东西…

高速风筒的IPM模块解决方案

高速吹风筒是利用高转速产生的大风量来快速吹干头发&#xff0c;同时&#xff0c;高转速也使得电机与叶轮的体积缩小&#xff0c;便于设计出灵巧便携的外形。12万转的高速风筒的整体解决方案&#xff0c;满足高速吹风筒的所有应用场景&#xff0c;让客户用芯能的功率器件能更快…

PMP认证的PDU是什么?

PDU&#xff08;Professional Development Units&#xff09;即专业发展单元&#xff0c;是指您获取认证后&#xff0c;就项目管理专业进行学习、授课、或提供志愿服务的累积时间&#xff0c;以小时为单位&#xff0c;1小时即累积1个PDU。自证书获取日起&#xff0c;以三年为A周…

Ansible 多机自动化工具 初学笔记

此文档仅张聪明同学个人笔记&#xff1b;新负责KTH-RPL Cluster GPU的漫漫学习长路 English Docs: official https://docs.ansible.com/ansible/latest/index.html 中文相关文档&#xff1a; https://ansible.leops.cn/basic/Quickstart/https://blog.csdn.net/xinshuzhan/a…

java基础学习 day44(多态的优点和劣势)

1. 多态的优势 在多态形式下&#xff0c;右边对象可以实现解耦合&#xff08;即之后的代码与右边的子类对象不绑定&#xff0c;在更改子类对象后&#xff0c;之后的代码仍可以使用&#xff09;&#xff0c;便于扩展和维护在定义方法的时候&#xff0c;使用父类型作为参数&…

北京/东莞/广州/深圳2023年上半年软考(中/高级)报名>>>

软考是全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff08;简称软考&#xff09;项目&#xff0c;是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试&#xff0c;既属于国家职业资格考试&#xff0c;又是职称资格考试。 系统集成…

TCP/IP体系结构、Socket、进程PID、端口Port

计算机网络小结 一、TCP/IP体系结构 首先OSI参考模型&#xff0c;OSI将网络分为七层&#xff0c;自下而上分别是物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。 TCP/IP体系结构则将网络分为四层&#xff0c;自下而上分别是网络接口层、网络层、传输层、应用…

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

1&#xff0c;实现二级回复的入库操作 1.1 两个子组件&#xff08;comment-item和comment-frame&#xff09;与父组件reply之间的属性传值 comment-item&#xff1a; props: {item: {type: Object,default () {return {}}}},comment-frame&#xff1a; props: {commentObj: {…

LoRaWAN模块在车辆跟踪定位中的应用

目前 GPS已经在资产的管理中得到了越来越多的运用&#xff0c;如车辆跟踪、车队跟踪、资产监控等&#xff1b;人员跟踪&#xff0c;宠物跟踪&#xff0c;等等。在所有追踪装置中&#xff0c;最重要的是它的电池期望和监视距离。鉴于 LoRaWAN的功率消耗很小&#xff0c;而且能在…

Allegro如何快速检查走线是否跨分割操作指导

Allegro如何快速检查走线是否跨分割操作指导 在做PCB设计的时候,信号线跨分割的情况需要尽量避免,尤其是信号速率较高的情况,Allegro可以快速的检查PCB上哪个位置跨分割了,并且以高亮的形式报出来,类似下图 TOP层走线跨了L2层参考层空洞, 如何检查,具体操作步骤如下 点…

ArkUI实战,自定义饼状图组件PieChart

本节笔者带领读者实现一个饼状图 PieChart 组件&#xff0c;该组件是根据笔者之前封装的 MiniCanvas 实现的&#xff0c; PieChart 的最终演示效果如下图所示&#xff1a; 饼状图实现的拆分 根据上图的样式效果&#xff0c;实现一个饼状图&#xff0c;实质就是绘制一个个的实…

如何保护 IP 地址的隐私问题

是不是只有运营商才能查到某个人的住址信息呢&#xff1f;在大数据时代的今天&#xff0c;各种互联网应用收集了大量的数据信息&#xff0c;它们其实也可以根据这些信息&#xff0c;推断出某个人的大致地址位置。例如百度地图会一直用 App SDK 以及网页的方式记录 IP 和地址位置…

MySQL-redo log和undo log

什么是事务 事务是由数据库中一系列的访问和更新组成的逻辑执行单元 事务的逻辑单元中可以是一条SQL语句&#xff0c;也可以是一段SQL逻辑&#xff0c;这段逻辑要么全部执行成功&#xff0c;要么全部执行失败 举个最常见的例子&#xff0c;你早上出去买早餐&#xff0c;支付…

位运算(C/C++)

1. 基础知识 程序中的所有数在计算机内存中都是以二进制的形式储存的。位运算就是直接对整数在内存中的二进制位进行操作。比如&#xff0c;and运算本来是一个逻辑运算符&#xff0c;但整数与整数之间也可以进行and运算。举个例子&#xff0c;6的二进制是110&#xff0c;11的二…

Python概述 基础语法 判断 循环

Python概述常用快捷键第二章-Python基础语法01-字面量02-注释03-变量04-数据类型05-数据类型转换06-标识符07-运算符08-字符串的三种定义方式09-字符串的拼接10-字符串格式化11-字符串格式化的精度控制 12-字符串格式化-快速写法13-对表达式进行格式化14-字符串格式化练习题讲解…