小程序开发之视图容器（movable-view）

效果图

属性

参考：movable-view

实例

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/movable/movable"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. movable.js

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

4. movable.json

{
  "navigationBarTitleText": "movable-view组件"
}

5. movable.wxml

<!--pages/movable/movable.wxml-->
<view class="section">
    <view class="section__title">movable-view区域小于movable-area</view>
    <movable-area style="height: 200px; width: 200px; background: red;margin: 0 auto;">
        <movable-view 
            style="height: 50px; width: 50px; background: blue;" 
            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 (30px, 30px)</button>
    </view>
    <view class="section__title">movable-view区域大于movable-area</view>
    <movable-area style="height: 50px; width: 50px; background: red;margin:0 auto 200px;">
        <movable-view 
            style="height: 140px; width: 140px; background: blue;" 
            direction="all">
        </movable-view>
    </movable-area>
    <view class="section__title">可缩放</view>
    <movable-area style="height: 200px; width: 200px; background: red;margin: 0 auto;" scale-area>
        <movable-view 
            style="height: 50px; width: 50px; background: blue;" 
            direction="all" 
            bindchange="onChange" 
            bindscale="onScale"
            scale 
            scale-min="0.5" 
            scale-max="4" 
            scale-value="2">
        </movable-view>
    </movable-area>
</view>

6. movable.wxss

/* pages/movable/movable.wxss */
.btn-area {
    width: 590rpx;
    margin: 12rpx auto 0;
}

来源：CSDN

作者：小朵八

链接：https://blog.csdn.net/duoduo_11011/article/details/104428499