微信小程序-movable-view

原文链接： https://www.mk2048.com/blog/blog.php?id=h0cak1b2c1bb&title=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-movable-view

<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">movable-view区域小于movable-area</view>
    <movable-area>
      <movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
    </movable-area>
  </view>
  <view class="btn-area">
    <button bindtap="tap" class="page-body-button" type="primary">click me to move to (30px, 30px)</button>
  </view>

  <view class="page-section">
    <view class="page-section-title">movable-view区域大于movable-area</view>
    <movable-area>
      <movable-view class="max" direction="all">text</movable-view>
    </movable-area>
  </view>

  <view class="page-section">
    <view class="page-section-title">只可以横向移动</view>
    <movable-area>
      <movable-view direction="horizontal">text</movable-view>
    </movable-area>
  </view>

  <view class="page-section">
    <view class="page-section-title">只可以纵向移动</view>
    <movable-area>
      <movable-view direction="vertical">text</movable-view>
    </movable-area>
  </view>

  <view class="page-section">
    <view class="page-section-title">可超出边界</view>
    <movable-area>
      <movable-view direction="all" out-of-bounds>text</movable-view>
    </movable-area>
  </view>

  <view class="page-section">
    <view class="page-section-title">带有惯性</view>
    <movable-area>
      <movable-view direction="all" inertia>text</movable-view>
    </movable-area>
  </view>

  <view class="page-section">
    <view class="page-section-title">可放缩</view>
    <movable-area scale-area>
      <movable-view direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="{{scale}}">text</movable-view>
    </movable-area>
  </view>

  <view class="btn-area">
    <button bindtap="tap2" class="page-body-button" type="primary">click me to scale to 3.0</button>
  </view>
</view>

index.wxml

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100rpx;
  background: #1AAD19;
  color: #fff;
}

movable-area {
  height: 400rpx;
  width: 400rpx;
  margin: 50rpx;
  background-color: #ccc;
  overflow: hidden;
}

.max {
  width: 600rpx;
  height: 600rpx;
}

.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}

.page-section:last-child{
  margin-bottom: 0;
}

.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

index.wxss

Page({
  data: {
    x: 0,
    y: 0,
    scale: 2,
  },
  tap(e) {
    this.setData({
      x: 30,
      y: 30
    })
  },
  tap2() {
    this.setData({
      scale: 3
    })
  },
  onChange(e) {
    console.log(e.detail)
  },
  onScale(e) {
    console.log(e.detail)
  }
})

index.js

{
  "pages":[
    "index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "movable-view",
    "navigationBarTextStyle":"black"
  }
}

app.json

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}

.page-body {
  padding: 20rpx 0;
}

.btn-area{
  margin: 60rpx 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0 30rpx;
}

app.wxss

{
    "description": "项目配置文件。",
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "1.9.93",
    "appid": "wxc32558e56ff41f5d",
    "projectname": "movable-view",
    "isGameTourist": false,
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

project.config.json

更多专业前端知识，请上 【猿2048】www.mk2048.com