工作成长记录（二）悬浮按钮组件

说明

我是一个还几乎没怎么用过框架的没写过什么项目，没多人协作写代码的经验的FW~~，所以以下内容只是我这个新手今天开始折腾的思考。。

前言

话说本来今天的计划是学习React，为做一个网页做准备了。突然又多了一个任务，需要在小程序的很多页面里添加一个悬浮按钮，效果类似iPhone那个球，可以随意拖动，然后会自动吸附到左边或者右边，点击出现蒙版出来其他功能按钮。

使用自定义组件

好多页面都需要，那不用说了肯定又是做成组件了。虽然我当下对组件的复用很方便并不是报太大希望。。

微信官方组件

最好的情况当然就是微信给我们做了组件了，我们直接用就是了。。不过嘛。找了一圈貌似就是movable-area和movable-view这两兄弟了。(PS:微信这组件，那才有组件的样子，棒棒哒！！)。不过捏。。貌似这两兄弟也帮不上我太大的忙。简单说个问题，就不很细的一一列举了。

• 不能全图移动。如果移动的时候把movable-area铺满全屏，最后要吸附的时候，如果把movable-area在变细按钮就会瞬移，别告诉我这里自己做动画，那我还不如直接自己做了，而我也就是这么做的。我并不是说要么不用别人的代码，要么就全用别人的。主要我认为，这个组件原本设计就不是为了来做悬浮按钮的。如果就和我之前说的，如果一个组件使用起来会非常麻烦，比如这里到头来还是自己做动画。那我当下真的觉得这个组件要么是失败的，要么就是使用者是失败的，跑步就不应该传高跟鞋，非得跑步穿高跟鞋，然后自己加上一大堆保护设备，甚至改造高跟鞋。那有什么意义呢？有运动鞋就穿运动鞋，没运动鞋，只有高跟鞋，自己做一双不高跟的也就是了。

自定义组件开发

之前有pixi开发小游戏的经验。如果这种效果在canvas里做。思路我想不需要我多说了。现在就是要操作dom节点，然而微信小程序不支持直接操作dom节点，虽然不支持但是，支持数据绑定啊。wxml里写样式,如下

<view class="bar {
    {isClick? 'hide' : ''}}" id="bar"
      bind:touchstart