movable-view 可移动视图容器

解释：可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

属性说明

direction 有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 1： movable-view区域小于movable-area

  1. <view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            movable-view区域小于movable-area        </view>        <movable-area>            <movable-view x="{=x1=}" y="{=y1=}" damping="20" disabled="false" direction="all">text</movable-view>        </movable-area>         <button bind:tap="move" class="move-button" type="primary">点击移动到 (50px, 50px)</button>    </view></view>
  1. Page({    data: {        x1: 30,        y1: 30,    },    move() {        this.setData({            x1: 50,            y1: 50        })    }});

代码示例 2：movable-view区域大于movable-area

  1. <view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            movable-view区域大于movable-area        </view>        <movable-area>            <!-- 添加大于movable-area的class -->            <movable-view x="{=x=}" y="{=y=}" class="bigger-area" direction="all">text</movable-view>        </movable-area>    </view></view>
  1. Page({    data: {        x: 30,        y: 30    },});

代码示例 3：只可以横向移动

  1. <view class="card-area">    <view class="top-description border-bottom">        只可以横向移动    </view>    <movable-area htouchmove>        <movable-view x="{=x=}" y="{=y=}" direction="horizontal">text</movable-view>    </movable-area></view>
  1. Page({    data: {        x: 30,        y: 30    },});

代码示例 4：只可以纵向移动

  1. <view class="card-area">    <view class="top-description border-bottom">        只可以纵向移动    </view>    <movable-area vtouchmove>        <movable-view x="{=x=}" y="{=y=}" direction="vertical">text</movable-view>    </movable-area></view>
  1. Page({    data: {        x: 30,        y: 30    },});

代码示例 5： 可超出边界

  1. <view class="wrap">   <view class="card-area">        <view class="top-description border-bottom">            可超出边界        </view>        <movable-area>            <movable-view x="{=x=}" y="{=y=}" direction="all" out-of-bounds>text</movable-view>        </movable-area>    </view></view>
  1. Page({    data: {        x: 30,        y: 30    },});

代码示例 6： 带有惯性

  1. <view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            带有惯性        </view>        <movable-area>            <movable-view x="{=x=}" y="{=y=}" direction="all" inertia friction="0.5">text</movable-view>        </movable-area>    </view></view>
  1. Page({    data: {        x: 30,        y: 30    },});

代码示例 7： 可放缩

  1. <view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            可放缩        </view>        <movable-area>            <movable-view x="{=x=}" y="{=y=}" direction="all" animation="false" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="{{scale}}">               text            </movable-view>        </movable-area>        <button bind:tap="scale" class="scale-button" type="primary">点击放大3倍</button>    </view></view>
  1. Page({    data: {        x: 30,        y: 30,        scale: 1    },    move() {        this.setData({            x1: 50,            y1: 50        })    },    scale() {        this.setData({            scale: 3        })    },    onChange(e) {        console.log(e.detail)    },    onScale(e) {        console.log(e.detail)    }});

代码示例 8: 可悬浮菜单

在开发者工具中预览效果

  1. <view class="wrap">    <movable-area style="height: {{height}}px; width: {{width}}px; background-color: #f5f5f5">        <movable-view x="{=x=}" y="{=y=}" direction="all" animation="false" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4">              菜单        </movable-view>    </movable-area></view>
  1. Page({    data: {        x: 30,        y: 30,    },    onShow() {        swan.getSystemInfo({            success: res => {                console.log('getSystemInfo success', res);                this.setData({                    'width': res.windowWidth,                    'height': res.windowHeight                });            },            fail: err => {                console.log('getSystemInfo fail', err);            }        });    }});

Bug & Tip

  • -