微信小程序|可拖动悬浮窗的实现

问题描述

不管是小程序还是软件网页等，页面上的悬浮窗总是能够引起我们的注意，而一个悬浮窗的实现，在微信小程序开发的官方文档中，可将其理解为一个可移动视图容器，那么该使用什么组件来实现这样一个功能呢？

效果图：

解决方案

一个可移动视图容器的实现只需要调用官方文档的一个movable-view组件，然后再对wxml进行简单的配置即可实现。

需要了解的是：movable-view的direction属性支持以下四个值：

1、all-任意方向拖动

2、vertical-纵向拖动

3、horizontal-横向拖动

4、none-不能拖动

tips：如果direction设置为最后这个none，则只能依靠设置x,y属性值来为它进行在movable-area中的定位。

代码如下：

<movable-area style="pointer-events:  none;height: 100%;width: 100%;position:absolute;left:0px;top:0px;background:  lightblue;">

     <movable-view direction="all" style="pointer-events:  auto;height: 50px; width: 50px; background: pink;border-radius:  50%;">

         <image src='../images/icon_component_HL.png'></image>

     </movable-view>

</movable-area>

结语

我们总是在软件或者网页中，看到可自由移动的悬浮窗，而通常是一个不需要拖动的悬浮窗，甚至无法拖动的悬浮窗，后续将继续深入学习这个过程的实现。

END