movable-view 可移动视图容器

    值说明
    all水平方向和垂直方向
    vertical垂直方向
    horizontal水平方向
    none不可移动

    扫码体验

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

    2.     data: {
    3.         x1: 30,
    4.         y1: 30,
    5.     },
    6.     move() {
    7.         this.setData({
    8.             x1: 50,
    9.             y1: 50
    10.         })
    11.     }
    12. });
    1. <view class="wrap">
    2.     <view class="card-area">
    3.         <view class="top-description border-bottom">
    4.             movable-view区域大于movable-area
    5.         </view>
    6.         <movable-area>
    7.             <!-- 添加大于movable-area的class -->
    8.             <movable-view x="{=x=}" y="{=y=}" class="bigger-area" direction="all">text</movable-view>
    9.         </movable-area>
    10.     </view>
    11. </view>
    1. Page({
    2.     data: {
    3.         x: 30,
    4.         y: 30
    5.     },
    6. });

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

    1. <view class="card-area">
    2.     <view class="top-description border-bottom">
    3.     </view>
    4.     <movable-area htouchmove>
    5.         <movable-view x="{=x=}" y="{=y=}" direction="horizontal">text</movable-view>
    6.     </movable-area>
    7. </view>

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

    1. <view class="card-area">
    3.         只可以纵向移动
    4.     </view>
    5.     <movable-area vtouchmove>
    6.         <movable-view x="{=x=}" y="{=y=}" direction="vertical">text</movable-view>
    7.     </movable-area>
    8. </view>
    1. Page({
    2.     data: {
    3.         x: 30,
    4.         y: 30
    5.     },
    6. });
    1. <view class="wrap">
    2.    <view class="card-area">
    3.         <view class="top-description border-bottom">
    4.             可超出边界
    5.         </view>
    6.         <movable-area>
    7.             <movable-view x="{=x=}" y="{=y=}" direction="all" out-of-bounds>text</movable-view>
    8.         </movable-area>
    9.     </view>
    10. </view>
    1. Page({
    2.     data: {
    3.         x: 30,
    4.         y: 30
    5.     },
    6. });

    代码示例 6： 带有惯性

    1. Page({
    2.     data: {
    3.         x: 30,
    4.         y: 30
    5.     },
    6. });

    代码示例 7： 可放缩

    1. <view class="wrap">
    2.     <view class="card-area">
    3.         <view class="top-description border-bottom">
    4.         </view>
    5.         <movable-area>
    6.             <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}}">
    7.                text
    8.             </movable-view>
    9.         </movable-area>
    10.         <button bind:tap="scale" class="scale-button" type="primary">点击放大3倍</button>
    11.     </view>
    12. </view>
    1. Page({
    2.     data: {
    3.         x: 30,
    4.         y: 30,
    5.         scale: 1
    6.     },
    7.     move() {
    8.         this.setData({
    9.             x1: 50,
    10.             y1: 50
    11.         })
    12.     },
    13.     scale() {
    14.         this.setData({
    15.             scale: 3
    16.         })
    17.     },
    18.     onChange(e) {
    19.         console.log(e.detail)
    20.     },
    21.     onScale(e) {
    22.         console.log(e.detail)
    23.     }
    24. });
    1. <view class="wrap">
    2.     <movable-area style="height: {{height}}px; width: {{width}}px; background-color: #f5f5f5">
    3.         <movable-view x="{=x=}" y="{=y=}" direction="all" animation="false" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4">
    4.               菜单
    5.         </movable-view>
    7. </view>
    • Tip：movable-view 必须设置 width 和 height 属性，不设置默认为 10px。
    • Tip：movable-view 默认为绝对定位，top 和 left 属性为 0px。
    • Tip：当 movable-view 小于 movable-area 时，movable-view 的移动范围是在 movable-area 内。
    • Tip：当 movable-view 大于 movable-area 时，movable-view 的移动范围必须包含 movable-area（x 轴方向和 y 轴方向分开考虑）。
    • Tip：movable-view 必须在组件中，并且必须是直接子节点，否则不能移动。