鸿蒙期末项目(3)

服务器搭建完成之后,编写了诸多api用于数据传输工作(略)

编写完成之后,回到鸿蒙开发工具,开始编写搜索页面的代码。

打开搜索页面时,先会展示历史搜索记录(如果有的话),然后会根据热门搜索向用户推荐搜索内容。当用户点击历史搜索或者热门搜索的标签或者手动输入搜索内容并点击搜索时,搜索提示将会消失,并展示搜索结果。

在编写的过程中遇到了一个问题:

@State search: boolean = false;
onSearch(textInput) {this.search = true;
}
​
build() {SearchCard({ onSearch: this.onSearch })if(!this.search) {...}
}

将函数作为参数传递给子组件,子组件调用该函数并改变了响应式变量的值,但是却没有引起重绘。具体原因未知,但是可以将响应式变量使用@Link传入子组件中,在子组件中修改变量的值,这样就可以触发响应重绘。

搜索页面效果展示(数据仅为样例):

当用户搜索出来这些列表之后,点某个商店可以进入商店详情页并展示该商店所售卖的单品,而点某个单品可以进入商店并滚动到单品所在地。同时,数据库中还包含了单品所属类别,所以详情页可以按照类别来规划单品。

设计页面如下

遇到的问题

在父组件中定义函数,并将函数传给子组件,子组件调用函数时报错

错误原因:子组件调用函数时找不到函数中this所指的定义在父组件中的数据,所以在传递函数时需要用 .bind(this) 将this引用一同传递过去。

接下来来实现购物车界面,此界面参考美团购物车界面:

可以看到,同一家商店的商品会被归类到一个卡片中,每个商品前都有选择框,每个商店卡片头部也有选择框控制是否选择自家的所有商品,同时,在页脚处,有一个全局的选择框控制是否全选商品;当点击头部的编辑按钮时,页尾的结算按钮会变成删除按钮,删除所有选中的商品。

本人实现该界面的方法是:页首页脚单独编写两个组件Header、Footer来控制,随后通过算法分类出每个出现的商店和商品,通过ForEach渲染出相应的卡片组件StoreCard,在卡片中再次ForEach渲染出子组件ProductCard。然而考虑到还需要实现选择功能,所以使用@Observed修饰相关类后通过@ObjectLink传递给子组件。

中间遇到了一点小问题:

在这个卡片中,预想的效果应当是:

  • 当点击商店名旁边的选择框时,应当全选或全不全所有该商店的商品。

  • 当未点击商店名旁的选择框而是手动选择了全部商品,此时商店选择框应当自动被勾选

  • 当全选了商店的商品时,若手动取消了某个商品的选择,应当自动取消勾选商店的全选框

最初我为商店的全选按钮添加了 onChange 事件:

 .onChange((value) => {for (let index = 0; index < this.storeItem.child.length; index++) {this.storeItem.child[index].selected = value;}})

这样就可以实现点击全选后选择所有商品。但是当测试上述第三个功能时,子组件的改变引起了父组件单选框状态的改变,此时会触发这个 onChange 函数,取消一个商品的选择,导致所有不相关的商品一同被取消了选择。

解决方法是:将 onChange 改为 onClick 事件,原理很简单,只有当用户点击全选按钮时才会触发所有商品的全选/全不选方法,所以改为onClick可以避免程序修改selected 的值而触发事件。

最后编写个人主页见面,初步实现如下:

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

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

相关文章

Kafka入门到精通(四)-SpringBoot+Kafka

一丶IDEA创建一个空项目 二丶添加相关依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springf…

SQL 查询中 (+) 符号的含义

您已经很好地解释了 SQL 查询中 () 符号的含义&#xff0c;它确实用于表示左外连接&#xff08;LEFT OUTER JOIN&#xff09;&#xff0c;这是 SQL 中的一种连接操作。以下是对您提供的信息的补充和完善&#xff1a; ### 左外连接&#xff08;LEFT OUTER JOIN&#xff09;&…

hudi系列-schema evolution(一)

hudi+flink在非schema on read模式下也表现出了支持一部分的schema evolution功能,本篇中测试一下在非schema on read模式下,发生各种列变更情况时数据写入与读取情况。 flink 1.14.5hudi 0.13.1mor表思路: 选择mor表是因为它的数据文件有avro和parquet两种格式,能覆盖得更…

java中常用集合(边补充)

java中开发常用集合&#xff08;边补充&#xff09; 一、单列集合Collection1.1List接口1.1.1 ArrayList1.1.2 LinkedList1.1.3 Vector&#xff08;线程安全&#xff09;1.1.4 CopyOnWriteArrayList&#xff08;线程安全&#xff09; 1.2 Set接口1.2.1 HashSet1.2.2 LinkedHash…

用户订单管理API:轻松管理,购物无忧

在当今数字化时代&#xff0c;电子商务已经成为人们购物的首选方式。与传统的实体店相比&#xff0c;电商的优势在于便捷、快速、多样化等特点&#xff0c;使得更多的消费者选择了通过网络购物。而作为电商平台&#xff0c;如何提供更好的购物体验&#xff0c;是每个平台都需要…

企业工程项目管理系统源码:Java版源码解析

一、项目概述 鸿鹄工程项目管理系统是基于Spring Cloud、Spring Boot、Mybatis、Vue和ElementUI技术栈&#xff0c;采用前后端分离架构构建的工程管理软件。它旨在应对企业快速发展中的管理挑战&#xff0c;提升工程管理效率&#xff0c;减轻工作负担&#xff0c;加速信息处理…

一次关于k8s的node节点NotReady的故障排查

master现象 分析 kubectl get nodes -A 看了下pod的状态&#xff0c;好多CrashLoopBackOff kubectl get nodes -o wide 定位到那个具体node的IP地址&#xff0c;登录对应的IP去查看为什么会这样 node节点 journalctl -xe -f -u kubelet 查看此节点的 kubelet 服务&#xff…

基于SpringBoot的藏区特产销售平台

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; SpringBoot框架 工具&#xff1a; MyEclipse 系统展示 首页 个人中心 特产信息管理 订单管…

华宽通中标长沙市政务共性能力建设项目,助力智慧政务建设新飞跃

在数字化浪潮的推动下&#xff0c;长沙市政府正积极拥抱智慧城市建设&#xff0c;以科技力量提升政务服务效能。华宽通凭借其卓越的技术实力与丰富的项目经验&#xff0c;成功中标长沙市政务共性能力建设项目&#xff0c;这无疑是对华宽通在智慧城市领域实力的高度认可。 华宽…

huggingface_hub 设置国内镜像

要设置HuggingFace Hub的国内镜像&#xff0c;你可以按照以下步骤进行操作&#xff0c;以确保从国内镜像站点下载Hugging Face模型和数据集。 1. 安装依赖 首先&#xff0c;确保你已经安装了huggingface_hub库。如果没有&#xff0c;可以通过pip进行安装&#xff1a; bash复制…

背部筋膜炎最有效的治疗方法

背部筋膜炎的引起原因可以归结为多个方面&#xff0c;以下是详细的分点表示和归纳&#xff1a; 1、慢性劳损&#xff1a;长时间使用背部&#xff0c;如经常按摩背部&#xff0c;会导致筋膜老化、发炎&#xff0c;进而引发背部筋膜炎。症状可能包括背部疼痛、痉挛、肌肉无力感等…

Python 判断for循环最后一次的6种方法

在Python中&#xff0c;通常我们不会直接判断for循环是否正在执行最后一次迭代&#xff0c;因为Python的for循环是基于可迭代对象的&#xff0c;它不知道也不关心迭代的内部状态&#xff08;比如当前是第几次迭代&#xff09;。但是&#xff0c;我们可以使用一些技巧来间接地实…

uboot环境变量操作命令setenv和saveenv

uboot启动的时候会将环境变量从flash读取到DRAM中,使用命令 setenv修改的是DRAM中环境变量,修改以后要使用saveenv命令将修改 后的环境变量保存到flash中,否则的话uboot下一次重启会继续使用以前的环境变量值.setenv setenv - set environment variables Usage: setenv seten…

LeetCode.295数据流的中位数详解

问题描述 中位数是有序整数列表中的中间值。如果列表的大小是偶数&#xff0c;则没有中间值&#xff0c;中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFinder() 初始化 Medi…

Advantest 93000测试机中CLOCK DOMAIN 详解

爱德万测试&#xff08;Advantest&#xff09;的V93000系列测试系统是一个高度模块化和可扩展的平台&#xff0c;专为复杂和高性能的半导体器件测试而设计&#xff0c;包括系统级芯片&#xff08;SoC&#xff09;、存储器、射频&#xff08;RF&#xff09;和混合信号器件等。在…

剪画小程序:从失业到自媒体:37岁的勇敢转身!

37岁啦&#xff0c;按说这年纪工作该稳稳当当&#xff0c;家庭也和和美美。可谁能想到&#xff0c;我竟然失业了&#xff01;当时啊&#xff0c;心里头那叫一个迷茫、焦虑&#xff0c;感觉天都要塌下来了。 可日子还得过呀&#xff0c;总不能就这么被生活给打倒&#xff01;现在…

白敬亭章若楠甜度报表的难哄大师

#白敬亭章若楠&#xff0c;甜度爆表的难哄大师#&#x1f389;&#x1f389;&#x1f389;各位小伙伴们&#xff0c;你们还记得那个让我们心跳加速、嘴角上扬的CP组合吗&#xff1f;没错&#xff0c;就是白敬亭和章若楠&#xff01;他们可是凭借一部新剧&#xff0c;再次让我们感…

antd中Select大数据分页触底刷新处理优化

平时使用antd中Select的下拉一般就几十几百条&#xff0c;这时候直接使用组件模糊查询就能实现大部分业务场景需求。 今天遇到一个需要模糊查询并且总量上万条的下拉框&#xff0c;如果一次性怼上去上万条&#xff0c;会造成浏览器卡顿。所以这边采用后端分页&#xff0c;前端…

希喂生骨肉冻干值得入手吗?拯救瘦弱、增强抵抗力最强主食测评!

希喂生骨肉冻干值得入手吗&#xff1f;很多小姐妹觉着自家猫咪太瘦了、体质不咋好&#xff0c;换季还敏感、掉毛、不吃东西&#xff0c;听说生骨肉冻干好吸收、营养好&#xff0c;可以改善体质、拯救瘦弱、增强抵抗力&#xff0c;为了图省事&#xff0c;开始盲入生骨肉冻干&…

盲盒小程序:线上盲盒发展机遇

盲盒已经成为了当下年轻人的潮玩首选方式。随着二次元、影视行业的快速发展&#xff0c;给盲盒提供了各种新的发展方向&#xff0c;盲盒商品也在不断创新&#xff0c;种类丰富多样。玩家在拆盲盒时随机获得某一商品&#xff0c;具有惊喜感和刺激性。 目前&#xff0c;随着小程…