以下將展示微信小程序之視圖容器movable-area官方組件能力，組件樣式僅供參考，開發(fā)者可根據(jù)自身需求定義組件樣式，具體屬性參數(shù)詳見小程序開發(fā)文檔。
功能描述：
movable-view的可移動區(qū)域。
屬性說明：
Bug& Tip
1.tip:
movable-area 必須設(shè)置 width 和height屬性，不設(shè)置默認為10px**
2.tip:當(dāng)movable-view小于 movable-area 時，movable-view的移動范圍是在 movable-area 內(nèi)；
3.tip:當(dāng)movable-view 大于 movable-area 時，movable-view的移動范圍必須包含movable-area（x軸方向和 y軸方向分開考慮）
4.tip:若當(dāng)前組件所在的頁面或全局開啟了 enablePassiveEvent 配置項，該內(nèi)置組件可能會出現(xiàn)非預(yù)期表現(xiàn)（詳情參考enablePassiveEvent 文檔）
示例代碼
JAVASCRIPT
Page({
? onShareAppMessage() {
? ? return {
? ? ? title: 'movable-view',
? ? ? path: 'page/component/pages/movable-view/movable-view'
? ? }
? },
? data: {
? ? x: 0,
? ? y: 0,
? ? scale: 2,
? },
? tap() {
? ? this.setData({
? ? ? x: 30,
? ? ? y: 30
? ? })
? },
? tap2() {
? ? this.setData({
? ? ? scale: 3
? ? })
? },
? onChange(e) {
? ? console.log(e.detail)
? },
? onScale(e) {
? ? console.log(e.detail)
? }
})
WXML：
<view class="container">
? <view class="page-body">
? ? <view class="page-section">
? ? ? <view class="page-section-title first">movable-view區(qū)域小于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">點擊移動到 (30px, 30px)</button>
? ? </view>
? ? <view class="page-section">
? ? ? <view class="page-section-title">movable-view區(qū)域大于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">點擊放大3倍</button>
? ? </view>
? </view>
</view>
版權(quán)聲明：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，如涉及版權(quán)問題，請聯(lián)系我們第一時間處理。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html
