sannilake
/
miniprogram-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加 movable 组件页面

master
wuzhihao 2021-06-04 17:22:01 +08:00
parent 7650dfad2e
commit 9b513d453f
5 changed files with 173 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.json
View File

@ -28,6 +28,7 @@
"pages/component/canvas/canvas",
"pages/component/image/image",
"pages/component/video/video",
"pages/component/movable/movable",
"pages/component/doc-web-view/doc-web-view",
"pages/API/index/index",
"pages/API/get-network-type/get-network-type",
@ -97,4 +98,4 @@
}
]
}
}
}

37
pages/component/movable/movable.js 100644
View File

@ -0,0 +1,37 @@
Page({
onLoad() {
},
data: {
x: 0,
y: 0,
scale: 2,
show: false
},
show() {
this.setData({
show: !this.data.show
})
},
tap() {
this.setData({
x: '60rpx',
y: '60rpx'
})
},
tap2() {
this.setData({
scale: 3
})
},
log(e) {
console.log(e)
}
})

3
pages/component/movable/movable.json 100644
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

83
pages/component/movable/movable.wxml 100644
View File

@ -0,0 +1,83 @@
<view class="container">
<button bindtap="show">切换展示</button>
<scroll-view class="page-body">
<view class="page-section">
<view class="page-section-title first">movable-view区域小于movable-area</view>
<movable-area>
<movable-view wx:if="{{show}}"
x="{{x}}"
y="{{y}}"
bindhtouchmove="log"
bindvtouchmove="log"
direction="all">text</movable-view>
</movable-area>
</view>
<view class="btn-area">
<button bindtap="tap"
class="page-body-button"
type="primary">点击移动到 (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"
bindhtouchmove="log">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">只可以纵向移动</view>
<movable-area>
<movable-view direction="vertical"
bindvtouchmove="log">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
bindchange="log">text</movable-view>
</movable-area>
</view>
<view class="page-section">
<view class="page-section-title">带有惯性</view>
<movable-area>
<movable-view direction="all"
friction="7"
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="log"
bindscale="log"
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">点击放大3倍</button>
</view>
</scroll-view>
</view>

48
pages/component/movable/movable.wxss 100644
View File

@ -0,0 +1,48 @@
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;
}
scroll-view {
height: 2400px;
}
.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;
}
.container {
height: 100vh;
/* overflow: hidden; */
}