需要在小程序右下角放一张小图片,希望点击图片可以跳转其他页面,同时可以拖拽图片到页面其它位置,同时不能影响到页面上其它模块的点击跳转功能。
第一次接触的小伙伴们,是不是立马想到了小程序官方提供的 movable-area、movable-view 。如果页面不涉及任何操作,还真这样简单就OK了。
可问题是,使用movable-area的地方,被它占用的位置,后方页面的点击滑动等操作,将会失效,无法使用。
有鉴于此,想要完美解决拖动的问题,同时还要不影响到其它模块,自己监听图片的滑动点击事件才是正理。为了方便以后使用,我开发了一个组件move-drag,支持设置位置,边界,滑动方向等功能。
有需要的小伙伴们,可以直接拿来使用,目前在uniapp开发的小程序和H5中测试都是可以的,vue开发的移动端H5也是OK的,其它的使用场景就没有试过了。
写了几个使用的demo,截图如下: