微信小程序（可拖动悬浮按钮）

　

微小信

整体效果图

介绍

视图组件movable-view，它需要配合movable-area来一起使用。简单来说，它就是一个支持在指定区域内可以拖动内容的容器。

微信API地址： https://developers.weixin.qq.com/Miniprogram/dev/component/movable-view.html

案例代码：

<movable-area style="pointer-events: none;height: 100%;width: 100%;position:absolute;left:0px;top:0px;background: red;">
  	<movable-view direction="all" style="pointer-events: auto;height: 50px; width: 50px; background: blue;">
		<image src='../images/icon_component_HL.png' class="imgStyle"></image>
	</movable-view>
</movable-area>

movable-area 不设置 background: red;  背景透明。

属性说明

movable-view的direction属性支持以下四个值：

1. all - 任意方向拖动

2. vertical - 纵向拖动

3. horizontal - 横向拖动

4. none - 不能拖动

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

    <movable-area style="height: 200px;width: 200px;background: red;">
    	  <movable-view direction="none" x="50" y="50" style="height: 50px; width: 50px; background: blue;">
    	  </movable-view>
    </movable-area>
   

蓝色的movable-view就显示在了(50,50)的位置上，不能拖动。

mavable-area 事件穿透（下方内容可点击）

说明： movable-area 范围设置全屏，导致下发页面不能触发点击事件。

movable-area 的style设置pointer-events: none

movableview的样式设置pointer-events: auto，

可以实现movable-area点击事件穿透，而浮动组件可点击拖拉。

相关阅读

如何注册小程序开发小程序，不会开发可以先占坑

大家都知道，现在微信公众号用户名是有唯一性的，小程序当然也是，小程序已经被吹的上天了，这时候也应该入手了，不然万一它火了呢?1.登录

OFFICE 2010卸载 提示“安装程序包的语言不受系统支持

OFFICE 2010卸载 提示“安装程序包的语言不受系统支持”的解决方法转自：http://149banzhang.blog.51cto.com/239912/853943今天

微信开发者工具+ Visual Studio 2017开发微信小程序De

目录 Demo最终效果 开发工具： 开发步骤： 第一步：准备工作，用visual studio写后台数据 第二步：映射外网、路由（TP-LINK）端口，配置IIS发布项

懂球帝APP与小程序产品体验报告

懂球帝是一款提供全球体育足球新闻、深度报道、足球社区的手机APP，基本上可以满足球迷在手机上关于足球的一切需求。本文是关于懂

HIT 2018 CS:APP程序人生-Hello’s P2P

** HIT 2018 CS:APP程序人生-Hello’s P2P**