五、书架开发--3.弹出框功能开发、离线缓存功能开发

实现弹出框真实业务逻辑

私密阅读tab业务逻辑

1、根据点击的tab不同,从而展示出不同的popup弹窗

每个tab中都有自己的index,点击的时候获取这个index,就可以知道当前点击的是哪个tab,然后用switch-case来根据不同的index展示不同的popup弹窗。

首先在点击tab事件中,有图书被选中了才行,所以没有图书被选中就return,然后需要根据你选中的是哪个tab从而展示不同的弹窗,所以我们需要通过switch-case如下根据tab的index不同从而展示不同的东西

我们先做点击tab的逻辑,点击tab1就展示tab1的弹窗,我们把展示tab1弹窗封装为一个方法,该方法中就是我们之前做的调用create-api的this.popup()然后往里传标题和按钮文字这些;然后开启按钮我们需要做开启私密阅读的相关逻辑我们先封装为setPrivate()方法,取消按钮我们就关闭弹窗就好了所以调用hidePopup()

2、私密阅读中点击开启按钮的逻辑实现

点击(关闭)私密阅读这个tab,出现弹框后点击里面的开启按钮,从而需要展示的交互逻辑:

开启私密阅读的逻辑其实就是,看我们当前选中的图书们中每个图书的private字段(private为true表明这本书是私密阅读状态,为false即不是私密阅读状态)。

如果都是私密阅读状态,那我们tab中展示的文本应该是关闭私密阅读,然后我们点击关闭私密阅读中的开启按钮,则是要关闭私密阅读,所以被选中的书们会变成不是私密阅读状态的图书,所以我们要把这些被选中的图书们的private字段都置为false,最后展示toast的提示文本;

如果其中有书不是私密阅读状态,那我们tab中展示的文本应该是开启私密阅读,然后我们点击私密阅读中的开启按钮,则是要开启私密阅读,所以被选中的书们会变成私密阅读状态的图书,所以我们要把这些被选中的图书们的private字段都置为true,最后展示toast的提示文本

在做真实项目的时候,这个private一旦置为false以后我们还要调用一个接口回传到数据库里面,然后后端给我们做一些处理。

这里分为以下几点:

第一点:需要判断被选中的图书们的私密阅读状态

我们设计一个计算属性isPrivate(){}来计算被选中的图书们,循环遍历用every判断。如果图书们都是私密阅读状态,那么就返回true;如果图书们中但凡有一个不是私密阅读状态,那么就返回false

第二点:需要定义一个isPrivate变量来记录被选中图书们此时的私密阅读状态应该是什么

因为很多时候要知道这些被选中图书们的私密状态从而做一些逻辑判断,我们定义一个变量记录它就方便使用,不然得去一遍遍循环判断被选中图书们的状态不方便。

定义一个变量叫isPrivate,因为这个变量随时会变所以用let。然后根据前面的计算属性isPrivate()判断,如果计算属性中返回的是true则说明图书们都是私密阅读状态,后面我们点击的就是开启私密阅读,所以就把定义的这个变量isPrivate置为false(表示不需要开启私密阅读此时是私密阅读状态);如果计算属性中返回的是false则说明图书们有的不是私密阅读状态,后面我们点击的就是开启私密阅读,所以就把定义的这个变量isPrivate置为true(表示需要开启私密阅读此时不是私密阅读状态)

第三点:修改被选中的图书们的private字段

去遍历被选中的图书们,将isPrivate变量赋值给图书的private字段;然后你修改了书架数据,所以我们修改后把书架数据缓存到localstore中

第四点:tab中展示'私密阅读'还是'关闭私密阅读'

根据isPrivate变量判断,如果是true则表示当前被选中的图书们都是私密阅读状态,那么tab中就应该展示'关闭私密阅读';如果是false则表示当前选中的图书们有的是非私密阅读状态,那么tab中就应该展示'私密阅读'

第五点:点击popup弹窗按钮后弹出不同文本的toast弹窗

根据isPrivate变量判断,如果是true则表示当前被选中的图书们都是私密阅读状态,那么tab中是关闭私密阅读,所以点击popup弹框的开启按钮后,应该是展示'关闭私密阅读成功'的提示;如果是false则表示当前被选中的图书们有的是非私密阅读状态,那么tab中是私密阅读,所以点击popup弹框的开启按钮后,应该是展示'开启私密阅读成功'的提示;

如下,点击第五本书,当前这本书是非私密阅读状态,然后tab正确展示私密阅读,然后点击私密阅读,点击开启(即要把这本书设置为私密阅读),然后就可以看到这本书的private字段为true即为私密阅读状态了,而且toast展示已开启私密阅读

再次点击这本书,此时这本书是私密阅读状态,此时tab就显示关闭私密阅读,点击开启即展示关闭私密阅读成功啦

3、缓存弹出框实现思路也类似

1. 设置根据点击的tab2展示缓存弹窗

2. tab2的popup弹窗的内容

3. 定义一个计算属性判断被选中图书们是否全是缓存状态

4. 点击弹窗开启/删除按钮要实现的逻辑、toast弹框提示

5. tab栏文字的切换

上面状态的切换完成了,但是我们还要完成实际的下载,就先留着等一下再做

4、加入/移除书架

也是同理

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【GD32】MQ-6丙烷检测传感器

2.34 MQ-6丙烷检测传感器 MQ-6气体传感器所使用的气敏材料是在清洁空气中电导率较低的二氧化锡(Sno2)。当传感器所处环境中存在可燃气体时,传感器的电导率随空气中可燃气体浓度的增加而增大。使用简单的电路即可将电导率的变化转换为该气体浓度相对应的输出信号。M…

Windows下使用PanguVip实现浮动IP

在某些高可用场景下,我们往往需要使用浮动IP来进行实际访问的切换,比如为了保证Web应用的高可用,当主节点宕机后,我们将浮动IP切换到备节点,那么备节点就继续可以提供服务,在linux下我们可以使用keepalived…

scala---基础核心知识

一、什么是scala Scala 是一种多范式的编程语言,其设计初衷是要集成面向对象编程和函数式编程的各种特性。Scala运行于Java平台(Java虚拟机),并兼容现有的Java程序。 二、为什么要学习scala 1、优雅 2、速度快 3、能融合到hado…

【SpringBoot】获取参数

获取参数 传递单个参数传递多个参数传递对象后端参数重命名传递数组传递 json 数据获取 URL 中参数上传文件获取 cookie 和 session获取cookie获取session 传递单个参数 RequestMapping("/user") RestController public class UserController {// 传递单个参数Reque…

【Delphi 爬虫库 1】GET和POST方法

文章目录 1.最简单的Get方法实现2.可自定义请求头、自定义Cookie的Get方法实现3.提取响应协议头4.实现Post请求完成单词翻译 爬虫的基本原理是根据需求获取信息并返回。就像当我们感到饥饿时,可以选择自己烹饪食物、外出就餐,或者订外卖一样。在编程中&a…

Linux之bpfjit(2)使用分析和mini-tcpdump实现

Linux之bpfjit(2)使用分析和mini-tcpdump实现 Author: Once Day Date: 2024年4月13日 一位热衷于Linux学习和开发的菜鸟,试图谱写一场冒险之旅,也许终点只是一场白日梦… 漫漫长路,有人对你微笑过嘛… 全系列文章可以参考专栏:…

纯纯python实现梯度下降、随机梯度下降

最近面试有要求手撕SGD,这里顺便就把梯度下降、随机梯度下降、批次梯度下降给写出来了 有几个注意点: 1.求梯度时注意label[i]和pred[i]不要搞反,否则会导致模型发散 2.如果跑了几千个epoch,还是没有收敛,可能是学习率…

Linux 秋招必知必会(三、线程、线程同步)

六、线程 38. 什么是线程 线程是参与系统调度的最小单位,它被包含在进程之中,是进程中的实际运行单位 一个进程中可以创建多个线程,多个线程实现并发运行,每个线程执行不同的任务 主线程:当一个程序启动时&#xff0…

【Qt 学习笔记】Qt控件概述

博客主页:Duck Bro 博客主页系列专栏:Qt 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ Qt控件概述 文章编号:Qt 学习笔记 / 14 文章目录 Qt控件概…

排序之快速排序

代码 class Solution {public int[] sortArray(int[] nums) {merge(nums, 0, nums.length - 1);return nums;}private void merge(int[] nums, int l, int r){if(l > r) return;// 随机选取主元int i new Random().nextInt(r - l 1) l;int temp nums[i];nums[i] nums[…

探索ElasticSearch高级特性:从映射到智能搜索

欢迎关注我的公众号“知其然亦知其所以然”,获取更多技术干货! 大家好,我是小米!今天我们来聊聊阿里巴巴面试题中的一个高级话题:ElasticSearch(以下简称ES)的高级特性。ES作为一款强大的搜索引擎,在处理大规模数据和复杂查询时发挥着重要作用。而了解其高级特性,则是…

微服务-6 Gateway网关

一、网关搭建 此时浏览器访问 localhost:10010/user/list 后正常返回数据,说明网关已生效,其原理流程图如下: 二、网关过滤器 作用:处理一切进入网关的请求和微服务响应。 1. 网关过滤器的分类: a. 某个路由的过滤器 …

购物车实现

目录 1.购物车常见的实现方式 2.购物车数据结构介绍 3.实例分析 1.controller层 2.service层 1.购物车常见的实现方式 方式一:存储到数据库 性能存在瓶颈方式二:前端本地存储 localstorage在浏览器中存储 key/value 对,没有过期时间。s…

Linux中使用Alias技术实现虚拟网卡

背景 在《Linux中虚拟网络技术有哪些》一文中,我们介绍了多种创建虚拟网卡的方法。本文介绍使用Alias技术创建虚拟网卡。 分析 Alias技术 在计算机领域中,Alias技术指的是给一个实体(如文件、命令、网络接口等)起一个别名或替代…

【leetcode】 跳跃游戏 IV

跳跃游戏IV 题目思路代码 题目 给你一个整数数组 arr &#xff0c;你一开始在数组的第一个元素处&#xff08;下标为 0&#xff09;。每一步&#xff0c;你可以从下标 i 跳到下标 i 1 、i - 1 或者 j &#xff1a;i 1 需满足&#xff1a;i 1 < arr.length i - 1 需满足&…

C++静态库与动态库

什么是库 库是写好的现有的&#xff0c;成熟的&#xff0c;可以复用的代码。现实中每个程序都要依赖很多基础的底层库&#xff0c;不可能每个人的代码都从零开始&#xff0c;因此库的存在意义非同寻常。 本质上来说库是一种可执行代码的二进制形式&#xff0c;可以被操作系统载…

Linux中磁盘的分区,格式化,挂载和文件系统的修复

一.分区工具 1.分区工具介绍 fdisk 2t及以下分区 推荐 (分完区不保存不生效&#xff0c;有反悔的可能) gdisk 全支持 推荐 parted 全支持 不推荐 ( 即时生效&#xff0c;分完立即生效) 2.fdisk 分区,查看磁盘 格式:fdisk -l [磁盘设备] fdisk -l 查看…

运动听歌哪款耳机靠谱?精选五款热门开放式耳机

随着人们对运动健康的重视&#xff0c;越来越多的运动爱好者开始关注如何在运动中享受音乐。开放式蓝牙耳机凭借其独特的设计&#xff0c;成为了户外运动的理想选择。它不仅让你在运动时能够清晰听到周围环境的声音&#xff0c;保持警觉&#xff0c;还能让你在需要时与他人轻松…

【数据结构】常见的排序算法

&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;个人主页&#x1f388;&#x1f388;&#x1f388;&#x1f388;&#x1f388; &#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;&#x1f9e7;数据结构专栏&#x1f388;&#x1f388;&#x1f388;&…

基于单链表实现通讯管理系统!(有完整源码!)

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 文章专栏&#xff1a;C语言实战项目 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 1、前言 友友们&#xff0c;这篇文章是基于单链…