258资源分享网

微信小程序 movable-view

 

 

 

movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。

 

1.属性：

属性名 类型   默认值   说明
direction   String    none   movable-view的移动方向，属性值有all、vertical、horizontal、none  
inertia   Boolean    false   movable-view是否带有惯性  
out-of-bounds   Boolean    false   超过可移动区域后，movable-view是否还可以移动  
x   Number       定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画  
y   Number       定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画  
damping   Number    20   阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快  
friction   Number    2   摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值  

2.用法：

简单示例1：

 

[html] view plain copy

 

<movable-area style="height: 300rpx;width: 300rpx;background: blue;">  

    <movable-view direction="all" style="height: 100rpx; width: 100rpx; background: yellow;">  

     </movable-view>  

</movable-area>  

我们用movable-area设定了一个300x300大小的一个可拖动区域(蓝色)，然后在这个区域内放置了一个大小为100x100的可以拖动内容movable-view（黄色），可拖动内容的direction设置为all，即可以在任意方向上进行拖动。

效果如图：

简单示例2：

[html] view plain copy

 

<movable-area style="height: 600rpx;width: 600rpx;background: blue;">  

      <!--黄色可以任意二维方向拖动内容-->  

      <movable-view direction="all" style="height: 100rpx; width: 100rpx; background: yellow;">  

      </movable-view>  

      <!--红色只能横向拖动内容-->  

      <movable-view direction="horizontal" x="100" y="0" style="height: 100rpx; width: 100rpx; background: red;">  

      </movable-view>  

       <!--绿色只能竖向拖动内容-->