🗃️耗时两周,肝了一个超丝滑的卡盒小程序(第二期)

前言

在上周,写了一篇关于自己写了一个卡盒小程序的文章 🗃️耗时一周,肝了一个超丝滑的卡盒小程序 在写这篇文章时,我将小程序的基本概念设计和基础操作都实现完成了,原本想着补全后续的一些功能,再把 bug 修一修,就开始写关于这个卡盒小程序的实现方式了。但在自己用的过程中,陆陆续续又发现一些可以提升体验的小点,以及开发拖拽排序功能花了很多时间,再加上工作也比较忙,业余时间比较少就又过去了一周。

不过好在是也将第一周想做的一些功能点都完成了,因此先写篇文章介绍一下新特性和一些调整,之后的实现方式的文章也会基于新的特性去写。

新功能

添加卡盒

添加卡盒时,增加了一步选择添加卡盒的方式,且选择的时候需要先填写卡盒的名称后再创建,相较于原本直接创建卡盒使用默认名称的设计,我还是觉得填写名字后再创建比较合理,毕竟大部分时候我添加卡盒后都需要手动再长按卡盒去重命名,还是选择牺牲一些操作的流畅性将名称输入作为必填的一步。

导入卡盒

在上篇文章中,我已经实现了在已有的卡盒中导入卡片的功能,导入的卡片会添加在已有卡片的后面。在实际使用的时候发现有时候新建卡盒再导入卡片,每次都得把内置的那张卡片给删掉挺麻烦的,因此增加了导入卡盒的功能,也就是可以直接导入卡片并生成一个新卡盒,把添加卡盒和导入卡片合并为一步了。

正反面反转

除了支持导入直接创建卡盒,现在在导入卡片或卡盒的过程中,还可以将解析的内容正反面反转,便于导入卡片的时候忘记调整前后顺序时,不需要重新去一个一个调整文本再次解析。

大卡片模式

在之前的设计中,我为了体验的一致性,在卡盒打开后,点击卡片就可以直接在当前页面进入大卡片模式,效果虽然很丝滑,但是实际在手机操作时如何卡盒比较多,页面可以上下滚动,这样左右滑动的时候不小心就把页面上下移了一点,而且自己写的拖拽卡片方法效果也没有原生的轮播图效果好,最终还是将大卡片页面单独移动到了一个新页面,毕竟大卡片模式是我想象中的一个用于专注学习的模式,放在单独页面也可以接收,而且还会简化很多后续功能实现。

笔记功能

在大卡片模式时,长按进入内容编辑模式,现在除了可以编辑卡片的主体内容,还可以编辑正反面的笔记,笔记可以用于记录一些比较长的内容而不影响卡片本体。

卡片排序

卡片拖拽排序是我近期里花的时间最多的一个功能,虽然想到小程序里做拖拽会比较麻烦,但没想到最终还是踩了好多坑,现在大家看到的样子已经是我改了两版设计后的结果了。

最初我想着能够做到在卡片页面原地拖拽进行排序的,但是简单验证了下发现边界情况太多了,而且将排序耦合在原本的页面中,又会给后面的功能增加复杂度,最终还是选择了官方提供的两个拖拽组件来实现,再结合自己写的移动的方法来做拖拽排序,目前的使用体验只能算是凑合,我还不是很满意,这个后续有想法了会持续优化的。

现在的拖拽排序实现方法我也会放在后续小程序实现相关的文章中。

大家对于这个小程序有什么有意思的功能也可以给我留言,感谢~

相关推荐
nuIl5 小时前
实现一个 Coding Agent(3):工具调用
前端·agent·cursor
nuIl5 小时前
实现一个 Coding Agent(4):ReAct 循环
前端·agent·cursor
nuIl5 小时前
实现一个 Coding Agent(1):一次 LLM 调用
前端·agent·cursor
nuIl5 小时前
实现一个 Coding Agent(2):让 LLM 流式响应
前端·agent·cursor
copyer_xyf5 小时前
Python 异常处理
前端·后端·python
sugar__salt5 小时前
从栈队列数据结构到JS原型面向对象全解
前端·javascript·数据结构
独特的螺狮粉6 小时前
篮球集训班器具管理系统 - 鸿蒙PC Electron框架完整技术实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙
pusheng20256 小时前
IFSJ全英文专访:中国创新力量重塑先进气体感知技术,赋能全球关键基础设施安全
前端·网络·人工智能·物联网·安全
AI_零食6 小时前
番茄钟鸿蒙PC Electron框架完成:状态机、定时器管理与专注力工具设计
前端·javascript·华为·electron·开源·鸿蒙·鸿蒙系统
提子拌饭1336 小时前
逛三园游戏——基于鸿蒙PC Electron框架实现
前端·javascript·游戏·华为·electron·鸿蒙