最近上线了一个小程序，里面用到了一个类似游标滑动的小功能，帮助用户选择词语后做推荐替换的。由于之前也没有用到相关的组件，所以手动实现了一下分享给大家。
技术调研
其实前期做技术调研的时候也发现这个功能有点难度，特地留了一点调研的时间。
所以以后大家要是发现一些比较新的交互或者功能自己不确定的记得预留调研时间，因为一旦时间定下来了，产品的上线时间是不会给你宽限的机会的，切记。
交互图
这就是交互的效果，左右可以拖动并且给选中的词语加上背景颜色。不知道大家有没有什么好的想法。
本次使用的是Taro框架，所以我们就去文档上面浏览了一遍，还有去官方的物料市场看了一下没有发现合适的组件。
「📝方案一」
起初我的实现方案是考虑使用长按的动作，因为这样有系统的默认“游标”出现的。但是问题很快就出来了，每个系统的交互不一样，我真机调试了一下发现会出现“复制”的提示，而且上面的提示小程序是没法自定义的。
所以很快我就放弃了这个方案。
「📝降级方案二」
第二个方案其实也不算是实现的方案，就是一个降级的策略。
既然没有合适的交互方案，我们就和产品讨论一次能不能用类似点击的方式“点选”每一个字，然后加上背景颜色。
但是技术虽然是可行的，用户体验却不好。第一是不符合交互逻辑，第二是点击繁琐。之前有领导说过，一个产品上去了，用户体验不好还不如不上，上了还得挨骂。
说的确实如此，我们从用户体验的角度思考了一下还是使用原来游标滑动的方案，用户操作简单不繁琐。
「📝最终方案三」
我们从原生实现的角度出发，这种交互最重要的就是“拖动”。我们想着要自己实现一个拖动的块元素，想着还是有点复杂度的。
还好后面浏览了一遍Taro的文档，终于找到了一个已经有的组件 「MovableView」
动手之前还是要好好看文档呀，不然会走很多弯路。
实现方案
好了，技术可行性的调研已经完成了✅
到这一步我们就考虑怎么去实现这种交互的方式。因为MovableView是可以滑动的元素，那么我们就把两个游标用MovableView包装一下就可以实现滑动了。
而且MovableView的属性很多，比如只能X/Y轴滑动，滑动的change事件和end事件，这就满足了我们只能横向滑动的交互了。
但是，这只是实现了游标的滑动操作，远远不够，字还没选呢？
由于这里的场景比较简单，我就直接说方案了。我们这里一些固定🧷的值，比如每个字的宽度，还有我们可以通过change滑动拿到左右游标的距离。
- right - left 表示的是游标的区间距离
- left 表示左游标的距离，用于计算开始的字的索引： index
- 固定每个格子的宽度width，可以得出选中多少个字 ：( right - left ) / width
那么，可以得出的数据有，字的开始位置index，往后选中的字数num，动态给这几个索引的字加上类名渲染蓝色选中背景
如图，可以知道从index=4开始（美），往后num=2，即 [ 4, 5 ] 的索引的就是选中的文字。
看着功能没啥问题，但是要是体验一下就会发现有一些缺点：
- 目前还不能控制左游标滑动到右游标右边的情况
- 目前不能有吸附文字的效果，如果滑动不规范会导致计算错误的问题
因为我们是在滑动的事件实时计算的选中文字，由于文字的宽度是固定的，所以计算的过程中难免会出现一些误差。
总结
通过这次的实现方案，也总结了一下关于技术调研这件事情。很多人都不会去做一些前期的方案可行性分析，导致后边会踩很多坑，有时候可能还会推倒重来。
所以技术分析是必要的。特别是自己没有把握的情况下。
分析完了之后你会发现，往往编码才是简单的一步，毕竟很多时候我们都是在写业务代码，并不会有很高的复杂度，也不会有很多算法的方面在里面。
一定要做技术调研做编码的阶段设计组件模块拆分
以上是一些开发的步骤，做好了这些就会发现复杂需求就是又一个个小需求叠加的，不用有太大压力。
参考链接🔗：
MovableView: taro-docs.jd.com/taro/docs/c…
