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

前言

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

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

新功能

添加卡盒

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

导入卡盒

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

正反面反转

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

大卡片模式

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

笔记功能

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

卡片排序

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

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

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

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

相关推荐
大鸡腿最好吃6 分钟前
为啥react要用jsx
前端·javascript·react.js
小黄编程快乐屋10 分钟前
前端小练习——大雪纷飞(JS没有上限!!!)
开发语言·前端·javascript
程序猿阿伟11 分钟前
《平衡之策:C++应对人工智能不平衡训练数据的数据增强方法》
前端·javascript·c++
STUPID MAN26 分钟前
vue3使用后端传递的文件流进行文件预览
前端·javascript·vue.js·文件预览
-代号952734 分钟前
【React】二、状态变量useState
前端·javascript·react.js
爬坑的小白35 分钟前
el-menu导航三级数据结构及数据展示
前端·javascript·vue.js
CodeSheep44 分钟前
雷军又添一员猛将!!
前端·后端·程序员
dz88i81 小时前
关于Chrome自动同步书签的解决办法
前端·chrome
温轻舟2 小时前
前端开发 之 15个页面加载特效中【附完整源码】
前端·javascript·css·html
前端青山2 小时前
CSS 动画效果实现:图片展示与交互
开发语言·前端·javascript·css·vue.js·前端框架