小程序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有什么區別”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！