小程序: moveable-area 和 movealbe-view

代码Github地址

一. movable-area

movable-view的可移动区域。

1. 属性说明

二. 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. })