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

前言

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

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

新功能

添加卡盒

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

导入卡盒

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

正反面反转

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

大卡片模式

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

笔记功能

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

卡片排序

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

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

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

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

相关推荐
Qrun1 小时前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp1 小时前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.2 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl4 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫5 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友5 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理7 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻7 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
mapbar_front8 小时前
在职场生存中如何做个不好惹的人
前端
牧杉-惊蛰8 小时前
纯flex布局来写瀑布流
前端·javascript·css