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

一. 可拖动view

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

movable-area 包裹了movable-view 其中movable-area 的属性如下 代码示例: 在wxml中的代码如下

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 事件, 用于被缩放时, 触发的事件

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

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

在js中写如下的函数

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

})

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

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