W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
版本要求:基礎(chǔ)庫 1.11.0 或更高版本;若版本較低,建議做 兼容處理。
movable-view 的可移動(dòng)區(qū)域。movable-area 必須設(shè)置 width 和 height 屬性,不設(shè)置默認(rèn)為 10px。
<!-- API-DEMO page/component/movable-view.axml -->
<view class="page">
<view class="page-description">可移動(dòng)視圖</view>
<view class="page-section">
<view class="page-section-title">movable-view區(qū)域小于movable-area</view>
<view class="page-section-demo">
<movable-area>
<movable-view x="{{x}}" y="{{y}}" direction="all">movable-view</movable-view>
</movable-area>
</view>
<button style="margin-left: 10px; mrigin-right: 10px;" type="primary" onTap="onButtonTap">點(diǎn)擊移動(dòng)到 (30px, 30px)</button>
</view>
<view class="page-section">
<view class="page-section-title">movable-view區(qū)域大于movable-area</view>
<view class="page-section-demo">
<movable-area>
<movable-view class="max" direction="all">movable-view</movable-view>
</movable-area>
</view>
</view>
<view class="page-section">
<view class="page-section-title">只可以橫向移動(dòng)</view>
<view class="page-section-demo">
<movable-area>
<movable-view direction="horizontal">
movable-view
</movable-view>
</movable-area>
</view>
</view>
<view class="page-section">
<view class="page-section-title">只可以縱向移動(dòng)</view>
<view class="page-section-demo">
<movable-area>
<movable-view direction="vertical">
movable-view
</movable-view>
</movable-area>
</view>
</view>
</view>
// API-DEMO page/component/movable-view.js
Page({
data: {
x: 0,
y: 0,
},
onButtonTap() {
const { x, y } = this.data;
if (x === 30) {
this.setData({
x: x + 1,
y: y + 1,
});
} else {
this.setData({
x: 30,
y: 30
});
}
},
});
// API-DEMO page/component/movable-view.json
{
"allowsBounceVertical": "NO"
}
/* API-DEMO page/component/movable-view.acss */
movable-area {
height: 400rpx;
width: 400rpx;
margin: 50rpx 0rpx 0 50rpx;
background-color: #ccc;
overflow: hidden;
}
movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 200rpx;
width: 200rpx;
background: #108ee9;
color: #fff;
}
.max {
width: 600rpx;
height: 600rpx;
}
屬性名 | 類型 | 默認(rèn)值 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|---|
scale-area | Boolean | false | 否 | 當(dāng)里面的 movable-view 設(shè)置為支持雙指縮放時(shí),設(shè)置此值可將縮放手勢生效區(qū)域修改為整個(gè) movable-area。 | 1.20.0 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: