小程序moveable-area 和 movealbe-view

小程序movable-area與小程序movable-view有什么區(qū)別，在開發(fā)過程中要注意什么，下面為大家介紹。

一. movable-area

movable-view的可移動區(qū)域。

二. movalbe-view

可移動的視圖容器，在頁面中可以拖拽滑動

1. 注意點

1. movable-view必須設置width和height。不然就會默認為10px.
2. movable-view必須在<movable-area/>組件中，并且必須是直接子節(jié)點，否則不能移動
3. movable-view 默認為絕對定位，top和left屬性為0px
4. 當movable-view小于movable-area時，movable-view的移動范圍是在movable-area內(nèi)；
5. 當movable-view大于movable-area時，movable-view的移動范圍必須包含movable-area（x軸方向和y軸方向分開考慮）

三. 可運行的代碼

wxml

1. <view class='container'>
2. <view class="section_title_less"> movable-view區(qū)域小于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區(qū)域大于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. * 頁面的初始數(shù)據(jù)
4. */
5. data: {
6. x: "100px",
7. y: "10px"
8. },
9.  
10. /**
11. * 生命周期函數(shù)--監(jiān)聽頁面加載
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. })