微信开发中新增拖动组件--movableview介绍(微信拖动滑块验证如何拖动)

520节前夕，小程序又让程序员们坐立不安了，更新了一些吸引人的功能，比如内容转发api、ibeacon api、震动api、屏幕亮度等级api等。，还增强了地图组件的功能。

本次更新中还增加了一个UI组件，就是视图组件movable-view，需要和movable-area一起使用。简单来说，就是一个支持在指定区域拖动内容的容器。让我们看一个简单的例子:

& ltmovable -area style = & quot；高度:200px宽度:200px背景:红色；"& gt& lt可移动-视图方向= & quot所有& quotstyle = & quot高度:50px宽度:50px背景:蓝色；"& gt& lt/movable -view & gt；& lt/movable -area & gt；

连接

我们用movable-area设置了一个大小为200x200的可拖动区域(红色)，然后在这个区域放置了一个大小为50x50的可拖动内容movable-view(蓝色)。这个可拖动内容的方向被设置为all，这意味着它可以被拖动到任何方向。

拖动演示

在一个可移动的-区域标签中，你实际上不仅可以放置一个可移动的-视图，还可以放置多个可移动的-视图。请参见以下示例:

& ltmovable -area style = & quot；高度:200px宽度:200px背景:红色；"& gt& lt！--蓝色内容向任意方向拖动-->& lt可移动-视图方向= & quot所有& quotstyle = & quot高度:50px宽度:50px背景:蓝色；"& gt& lt/movable -view & gt；& lt！--只能水平拖动的黄色内容--& gt；& lt可移动-视图方向= & quot水平& quotstyle = & quot高度:20px宽度:50px背景:黄色；"& gt& lt/movable -view & gt；& lt/movable -area & gt；

界面2

拖动演示2

movable -视图的方向属性支持以下四个值:

所有-向任何方向拖动

垂直-垂直拖动

水平-水平拖动

无-不能拖。

前三个值很容易理解。如果方向设置为最后一个“无”，则只能通过设置x和y属性的值来定位在可移动-区域中:

& ltmovable -area style = & quot；高度:200px宽度:200px背景:红色；"& gt& lt可移动-视图方向= & quot无& quotx = & quot50 & quoty = & quot50 & quotstyle = & quot高度:50px宽度:50px背景:蓝色；"& gt& lt/movable -view & gt；& lt/movable -area & gt；这段代码一运行，蓝色的movable -视图就显示在(50，50)的位置:

image.png

好了，小程序的拖拽组件的功能大致就这样介绍了，希望对你有所帮助。

[相关建议]

1.下载微信微信官方账号平台源代码。

2.PigCMS (PigCMS)微电商系统运营版(独立微店商城+三级分销系统)

3.微信网王v3.4.5高级商业版微信魔方源代码

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：微信开发中新增拖动组件--movableview介绍(微信拖动滑块验证如何拖动) https://zhujicankao.com/113897.html