码迷,mamicode.com
首页 > 其他好文 > 详细

movable-view组件(拖拽缩放)

时间:2019-09-01 23:40:18      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:direction   size   function   func   cal   span   his   lib   btn   

1.wxml

<view>movable-view组件</view>
<view class=section>
  <view class=section_title>movable-view区域小于movable-area</view>
  <movable-area style=height:200rpx;width:200rpx;background:red;>
    <movable-view style="height:50rpx;width:50rpx;background:yellow;" x={{x}} y={{y}} direction=all inertia=true></movable-view>
  </movable-area>
  <view class=btn-area>
    <button size=mini bindtap="tap">click me to move to(30rpx,30rpx)</button>
  </view>
  <view>movable区域大于movable-area</view>
  <movable-area style=height:100rpx;width:100rpx;background:red;>
    <movable-view style="height:200rpx;width:200rpx;background:blue;" direction=all bindchange=onchange bindscale=onscale scale scale-min=0.5 scale-max=4 scale-value=2></movable-view>
  </movable-area>
</view>

2.JS

Page({
  data:{
    x:0,
    y:0
  },
  tap:function(e){
    this.setData({
      x:30,
      y:30
    });
  },
  onChange:function(e){
    console.log(e.detail);
  },
  onScale: function (e) {
    console.log(e.detail);
  }
})

技术图片

 

 

 

感谢:https://www.bilibili.com/video/av61418389/?p=33

 

movable-view组件(拖拽缩放)

标签:direction   size   function   func   cal   span   his   lib   btn   

原文地址:https://www.cnblogs.com/dzw159/p/11444151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!