小程序模板网

小程序: moveable-area 和 movealbe-view

发布时间:2018-06-15 14:14 所属栏目:小程序开发教程

代码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. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24550.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询