movable-area

movable-view 的可移动区域 平台差异说明 属性说明 注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px -

movable-view

可移动的视图容器，在页面中可以拖拽滑动 平台差异说明 属性说明 除了基本事件外，movable-view提供了两个特殊事件

movable-view 必须设置width和height属性，不设置默认为10pxmovable-view 默认为绝对定位，top和left属性为0px当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑） Tips

  • <movable-area/>组件中，并且必须是直接子节点，否则不能移动。
  • 组件属性设置不生效解决办法
  • 示例
    1. <template>    <view class="page-body">        <view class="uni-padding-wrap uni-common-mt">            <view class="uni-title uni-common-mt">                示例 1                <text>\nmovable-view 区域小于 movable-area</text>            </view>            <movable-area>                <movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>            </movable-area>            <view @tap="tap" class="uni-link uni-center uni-common-mt">                点击这里移动至 (30px, 30px)            </view>            <view class="uni-title uni-common-mt">                示例 2                <text>\nmovable-view区域大于movable-area</text>            </view>            <movable-area>                <movable-view class="max" direction="all">text</movable-view>            </movable-area>        </view>    </view></template>
    1. export default {    data() {        return {            x: 0,            y: 0,            old: {                x: 0,                y: 0            }        }    },    methods: {        tap: function(e) {            this.x = this.old.x            this.y = this.old.y            this.$nextTick(function() {                this.x = 30                this.y = 30            })        },        onChange: function(e) {            this.old.x = e.detail.x            this.old.y = e.detail.y        }    }}

在 GitHub 上编辑此页面！