微信小程序day02_08之可拖动与可缩放view

一. 可拖动view

movable-view 与movable-area 是需要捆绑在一起使用的.

movable-area 包裹了movable-view
其中movable-area 的属性如下



代码示例:
在wxml中的代码如下

<movable-area class="father-size">

    <movable-view class='size d' 
    direction="all"
    inertia="true"
    out-of-bounds="false"
    x="50"
    y="50"
    damping="900"
    friction="100"
    bindchange="mychangeevent">
    </movable-view>
</movable-area>

js中代码如下

// pages/moveable/moveable.js
Page({
  mychangeevent: function(){
    console.log("我被移动了")
  }
})

wxss 中的代码如下

.container{
  display: flex;
  white-space: nowrap  /* 不换行 */
}

.size {
  width: 100rpx;
  height: 150rpx;
}

.father-size {
  width: 100%;
  height: 650rpx;
  background-color: gray;
}

.d {
  background: orange;
  order: 2;
   flex: 2
}

效果如图 movable-area 为灰色的区域.
橙色的区域为可拖动的滑块

当滑块被拖动时, 触发了bindchange 事件, 打印如下 :

二. 可缩放view

代码示例
在wxml中的代码如下
其中设置了scale属性为true ,代表为可缩放的.
并且绑定了bindscale 事件, 用于被缩放时, 触发的事件

<movable-area class="father-size">
    <movable-view class='size d' 
    direction="all"
    inertia="true"
    out-of-bounds="false"
    x="50"
    y="50"
    damping="900"
    friction="100"
    bindchange="mychangeevent"
    scale="true"
    bindscale="myscaleevent">
    
    </movable-view>
</movable-area>

在wxss中修改默认的可拖动块的样式

.size {
  width: 250rpx;
  height: 250rpx;
}

在js中写如下的函数

Page({
  myscaleevent: function () {
    console.log("缩放中")
  }

})

预览如下, 在手机上可对橙色的块,进行双手的放大与缩小的操作.

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html