微信小程序 筆記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	初次手指移動發現爲垂直移動時觸發