微信小程序-movable-view
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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) } })
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{ "pages":[ "index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#F8F8F8", "navigationBarTitleText": "movable-view", "navigationBarTextStyle":"black" } }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{ "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": [] } } }