<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>
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;
}
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)
}
})
{
"pages":[
"index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#F8F8F8",
"navigationBarTitleText": "movable-view",
"navigationBarTextStyle":"black"
}
}
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;
}
{
"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": []
}
}
}
更多专业前端知识,请上 【猿2048】www.mk2048.com