前言
在上周,写了一篇关于自己写了一个卡盒小程序的文章 🗃️耗时一周,肝了一个超丝滑的卡盒小程序 在写这篇文章时,我将小程序的基本概念设计和基础操作都实现完成了,原本想着补全后续的一些功能,再把 bug 修一修,就开始写关于这个卡盒小程序的实现方式了。但在自己用的过程中,陆陆续续又发现一些可以提升体验的小点,以及开发拖拽排序功能花了很多时间,再加上工作也比较忙,业余时间比较少就又过去了一周。
不过好在是也将第一周想做的一些功能点都完成了,因此先写篇文章介绍一下新特性和一些调整,之后的实现方式的文章也会基于新的特性去写。
新功能
添加卡盒
添加卡盒时,增加了一步选择添加卡盒的方式,且选择的时候需要先填写卡盒的名称后再创建,相较于原本直接创建卡盒使用默认名称的设计,我还是觉得填写名字后再创建比较合理,毕竟大部分时候我添加卡盒后都需要手动再长按卡盒去重命名,还是选择牺牲一些操作的流畅性将名称输入作为必填的一步。
导入卡盒
在上篇文章中,我已经实现了在已有的卡盒中导入卡片的功能,导入的卡片会添加在已有卡片的后面。在实际使用的时候发现有时候新建卡盒再导入卡片,每次都得把内置的那张卡片给删掉挺麻烦的,因此增加了导入卡盒的功能,也就是可以直接导入卡片并生成一个新卡盒,把添加卡盒和导入卡片合并为一步了。
正反面反转
除了支持导入直接创建卡盒,现在在导入卡片或卡盒的过程中,还可以将解析的内容正反面反转,便于导入卡片的时候忘记调整前后顺序时,不需要重新去一个一个调整文本再次解析。
大卡片模式
在之前的设计中,我为了体验的一致性,在卡盒打开后,点击卡片就可以直接在当前页面进入大卡片模式,效果虽然很丝滑,但是实际在手机操作时如何卡盒比较多,页面可以上下滚动,这样左右滑动的时候不小心就把页面上下移了一点,而且自己写的拖拽卡片方法效果也没有原生的轮播图效果好,最终还是将大卡片页面单独移动到了一个新页面,毕竟大卡片模式是我想象中的一个用于专注学习的模式,放在单独页面也可以接收,而且还会简化很多后续功能实现。
笔记功能
在大卡片模式时,长按进入内容编辑模式,现在除了可以编辑卡片的主体内容,还可以编辑正反面的笔记,笔记可以用于记录一些比较长的内容而不影响卡片本体。
卡片排序
卡片拖拽排序是我近期里花的时间最多的一个功能,虽然想到小程序里做拖拽会比较麻烦,但没想到最终还是踩了好多坑,现在大家看到的样子已经是我改了两版设计后的结果了。
最初我想着能够做到在卡片页面原地拖拽进行排序的,但是简单验证了下发现边界情况太多了,而且将排序耦合在原本的页面中,又会给后面的功能增加复杂度,最终还是选择了官方提供的两个拖拽组件来实现,再结合自己写的移动的方法来做拖拽排序,目前的使用体验只能算是凑合,我还不是很满意,这个后续有想法了会持续优化的。
现在的拖拽排序实现方法我也会放在后续小程序实现相关的文章中。
大家对于这个小程序有什么有意思的功能也可以给我留言,感谢~