🗃️给我的卡盒小程序做了丝滑拖拽排序功胄1�7

前言

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

不过好在是也将第丄1�7周想做的丄1�7些功能点都完成了，因此先写篇文章介绍丄1�7下新特�1�7�和丄1�7些调整，之后的实现方式的文章也会基于新的特�1�7�去写�1�7�1�7/p>

新功胄1�7/h2>

添加卡盒

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

导入卡盒

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

正反面反轄1�7/h3>

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

大卡片模弄1�7/h3>

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

笔记功能

在大卡片模式时，长按进入内容编辑模式，现在除了可以编辑卡片的主体内容，还可以编辑正反面的笔记，笔记可以用于记录一些比较长的内容�1�7�不影响卡片本体〄1�7/p>

卡片排序

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

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

现在的拖拽排序实现方法我也会放在后续小程序实现相关的文章中�1�7�目前小程序已经上线，小程序名称丄1�7 “学习卡盒�1�7�1�7/strong>，紫色图标那个，欢迎搜索体验丄1�7下�1�7�1�7/p>

大家对于这个小程序有仄1�7么有意�1�7�的功能也可以给我留訄1�7，感谢~