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

前言

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

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

新功能

添加卡盒

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

导入卡盒

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

正反面反转

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

大卡片模式

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

笔记功能

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

卡片排序

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

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

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

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

相关推荐
GinoWi7 小时前
HTML基本格式 - 第一个HTML网页
前端
顶鲜花的牛粪7 小时前
Astro 项目升级全栈:EdgeOne Pages 部署指南
前端
0***R5157 小时前
前端云原生
前端·云原生
月弦笙音7 小时前
【Promise.withResolvers】发现这个api还挺有用
前端·javascript·typescript
疯狂踩坑人7 小时前
MCP理论和实战,然后做个MCP脚手架吧
前端·node.js·mcp
中杯可乐多加冰7 小时前
基于 DeepSeek + MateChat 的证券智能投顾技术实践:打造金融领域的专属大Q模型助手
前端·人工智能
凡人程序员7 小时前
搭建简易版monorepo + turborepo
前端·javascript
丸子哥哥7 小时前
同一个域名,如何添加多个网站?
服务器·前端·nginx·微服务
不努力也不会混7 小时前
vite联邦实现微前端(vite-plugin-federation)
前端·vue.js
伍亿伍千万7 小时前
Uptime Kuma修改作为内嵌页面的自适应
前端