微信小程序 笔记10 movable-view组件

movable-view组件

正常情况下，一个组件设置了后，如果不通过 js 或者 css 动画，那么是很难实现移动的。如果我们有 些组件设置完成后想要能够移动。那么我们就可以借助 movable-view 组件来实现。组件必须放在movable-area组件里。

这个组件目前项目上比较少见。

例子：

<!--me.wxml-->
<movable-area class="outer" scale-area>
    <movable-view class='inner' direction="all" inertia out-of-bounds damping="10" friction="0" scale></movable-view>
</movable-area>

/**me.wxss**/
.outer{
    width: 300px;
    height: 500px;
    background: pink
}
.inner{
    width: 100px;
    height: 100px;
    background: green
}

参数：

direction	movable-view的移动方向，属性值有 all、vertical、horizontal、none
out-of-bounds	超过可移动区域后，movable-view是 否还可以移动。就是说实现一个滑块能向外出去一点，松开就弹回去
inertia	movable-view是否带有惯性
x	定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快。默认值20
friction	摩擦系数，用于控制惯性滑动的动画， 值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值。可以控制甩动惯性的效果。
scale	是否支持双指缩放，默认缩放手势生效 区域是在movable-view内
scale-min	定义缩放倍数最小值
scale-max	定义缩放倍数最大值
scale-value	定义缩放倍数，取值范围为0.5 - 10
htouchmove	初次手指移动发现为水平移动时触发
vtouchmove	初次手指移动发现为垂直移动时触发