小程序moveable-area和movealbe-view有什么区别

这篇文章主要为大家展示了“小程序moveable-area和movealbe-view有什么区别”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“小程序moveable-area和movealbe-view有什么区别”这篇文章吧。

一. movable-area

movable-view的可移动区域。

二. movalbe-view

可移动的视图容器，在页面中可以拖拽滑动

1. 注意点

1. movable-view必须设置width和height。不然就会默认为10px.

2. movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动

3. movable-view 默认为绝对定位，top和left属性为0px

4. 当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；

5. 当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

三. 可运行的代码

wxml

1. <view class='container'>

2. <view class="section_title_less"> movable-view区域小于movable-area </view>

3. <movable-area class="area_less" scale-area>

4. <movable-view class="view_less" direction="all" scale inertia out-of-bounds x="{{x}}" y="{{y}}" damping="1" friction="200" bindchange="change" bindscale="scale"></movable-view>

5. </movable-area>

6.  

7. <view class="section_title_more"> movable-view区域大于movable-area </view>

8. <movable-area class="area_more" scale-area>

9. <movable-view class="view_more" direction="all">

10. <text>可移动的view</text>

11. </movable-view>

12. </movable-area>

13. </view>

wxss

1. .container {

2. display: flex;

3. flex-direction: column;

4. align-items: center;

5. }

6.  

7. .section_title_less {

8. font-size: 28rpx;

9. }

10.  

11. .area_less {

12. height: 200px;

13. width: 200px;

14. background-color: red;

15. }

16.  

17. .view_less {

18. height: 50px;

19. width: 50px;

20. background-color: yellow;

21. }

22.  

23. .section_title_more {

24. font-size: 28rpx;

25. margin-top: 50px;

26. }

27.  

28. .area_more {

29. height: 50px;

30. width: 50px;

31. background-color: red;

32. }

33.  

34. .view_more {

35. height: 200px;

36. width: 200px;

37. border-color: green;

38. border-width: 2px;

39. border

js

1. Page({

2. /**

3. * 页面的初始数据

4. */

5. data: {

6. x: "100px",

7. y: "10px"

8. },

9.  

10. /**

11. * 生命周期函数--监听页面加载

12. */

13. onLoad: function (options) {

14. },

15. change: function (event) {

16. // console.log(event);

17. },

18. scale: function (event) {

19. // console.log(event);

20. },

21. vtouchmove: function (event) {

22. console.log("纵向");

23. },

24. htouchmove: function (event) {

25. console.log("横向");

26. }

27. })

以上是“小程序moveable-area和movealbe-view有什么区别”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！