小程序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必须在组件中，并且必须是直接子节点，否则不能移动

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

2. movable-view区域小于movable-area

6. movable-view区域大于movable-area

9. 可移动的view

wxss

1. .container {

2. display: flex;

3. flex-direction: column;

4. align-items: center;

5. }

6. .section_title_less {

7. font-size: 28rpx;

8. }

9. .area_less {

10. height: 200px;

11. width: 200px;

12. background-color: red;

13. }

14. .view_less {

15. height: 50px;

16. width: 50px;

17. background-color: yellow;

18. }

19. .section_title_more {

20. font-size: 28rpx;

21. margin-top: 50px;

22. }

23. .area_more {

24. height: 50px;

25. width: 50px;

26. background-color: red;

27. }

28. .view_more {

29. height: 200px;

30. width: 200px;

31. border-color: green;

32. border-width: 2px;

33. border

js

1. Page({

2. /**

3. * 页面的初始数据

4. */

5. data: {

6. x: "100px",

7. y: "10px"

8. },

9. /**

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

11. */

12. onLoad: function (options) {

13. },

14. change: function (event) {

15. // console.log(event);

16. },

17. scale: function (event) {

18. // console.log(event);

19. },

20. vtouchmove: function (event) {

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

22. },

23. htouchmove: function (event) {

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

25. }

26. })

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