微信小程序 movable-view

  movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。

1.属性：

2.用法：

简单示例1：

<movable-area style="height: 300rpx;width: 300rpx;background: blue;">
<movable-view direction="all" style="height: 100rpx; width: 100rpx; background: yellow;">
</movable-view>
</movable-area>

效果如图：

简单示例2：

<movable-area style="height: 600rpx;width: 600rpx;background: blue;">
<!--黄色可以任意二维方向拖动内容-->
<movable-view direction="all" style="height: 100rpx; width: 100rpx; background: yellow;border-radius:30px">
</movable-view>
<!--红色只能横向拖动内容-->
<movable-view direction="horizontal" x="100" y="0" style="height: 100rpx; width: 100rpx; background: red;">
</movable-view>
<!--绿色只能竖向拖动内容-->
<movable-view direction="vertical"
x="0" y="100"
style="height: 100rpx; width: 100rpx; background: #0f0;">
</movable-view>
<!--白色不能拖动内容-->
<movable-view direction="none"
x="100" y="100"
style="height: 100rpx; width: 100rpx; background: #fff;border-radius:30px">
</movable-view>
</movable-area>

我们沿用movable-area设定了一个300x300大小的一个可拖动区域(蓝色)，然后在这个区域内分别放置了4个一个大小为100x100的可以拖动内容movable-view，

其中 黄色 可拖动内容的direction设置为all，           即 可以在任意方向上进行拖动；

        红色 可拖动内容的direction设置为horizontal，  即 只能横向进行拖动；

        绿色 可拖动内容的direction设置为vertical，      即  只能竖向进行拖动；

        白色 可拖动的direction设置为none，                即  不能拖动。

效果如图：

注意：

movable-view 必须设置width和height属性，不设置默认为10px movable-view 默认为绝对定位，top和left属性为0px 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

参考链接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html

在具体项目中，可以优化页面效果。欢迎留言交流指正！

最后

以上就是背后航空为你收集整理的微信小程序 movable-view的全部内容，希望文章能够帮你解决微信小程序 movable-view所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。