movable-view 是一個(gè)可移動(dòng)的視圖容器，在頁(yè)面中可以拖拽滑動(dòng)。

 

 

1.屬性：

屬性名	類型	默認(rèn)值	說(shuō)明
direction	String	none	movable-view的移動(dòng)方向，屬性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否帶有慣性
out-of-bounds	Boolean	false	超過(guò)可移動(dòng)區(qū)域后，movable-view是否還可以移動(dòng)
x	Number		定義x軸方向的偏移，如果x的值不在可移動(dòng)范圍內(nèi)，會(huì)自動(dòng)移動(dòng)到可移動(dòng)范圍；改變x的值會(huì)觸發(fā)動(dòng)畫
y	Number		定義y軸方向的偏移，如果y的值不在可移動(dòng)范圍內(nèi)，會(huì)自動(dòng)移動(dòng)到可移動(dòng)范圍；改變y的值會(huì)觸發(fā)動(dòng)畫
damping	Number	20	阻尼系數(shù)，用于控制x或y改變時(shí)的動(dòng)畫和過(guò)界回彈的動(dòng)畫，值越大移動(dòng)越快
friction	Number	2	摩擦系數(shù)，用于控制慣性滑動(dòng)的動(dòng)畫，值越大摩擦力越大，滑動(dòng)越快停止；必須大于0，否則會(huì)被設(shè)置成默認(rèn)值

2.用法：

簡(jiǎn)單示例1：

 

我們用movable-area設(shè)定了一個(gè)300x300大小的一個(gè)可拖動(dòng)區(qū)域(藍(lán)色)，然后在這個(gè)區(qū)域內(nèi)放置了一個(gè)大小為100x100的可以拖動(dòng)內(nèi)容movable-view（黃色），可拖動(dòng)內(nèi)容的direction設(shè)置為all，即可以在任意方向上進(jìn)行拖動(dòng)。

 

效果如圖：

簡(jiǎn)單示例2：

 

 

我們沿用movable-area設(shè)定了一個(gè)300x300大小的一個(gè)可拖動(dòng)區(qū)域(藍(lán)色)，然后在這個(gè)區(qū)域內(nèi)分別放置了4個(gè)一個(gè)大小為100x100的可以拖動(dòng)內(nèi)容movable-view，

其中 黃色 可拖動(dòng)內(nèi)容的direction設(shè)置為all，           即 可以在任意方向上進(jìn)行拖動(dòng)；

        紅色 可拖動(dòng)內(nèi)容的direction設(shè)置為horizontal，  即 只能橫向進(jìn)行拖動(dòng)；

        綠色 可拖動(dòng)內(nèi)容的direction設(shè)置為vertical，      即  只能豎向進(jìn)行拖動(dòng)；

        白色 可拖動(dòng)的direction設(shè)置為none，                即  不能拖動(dòng)。

效果如圖：

 

注意：

movable-view 必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px movable-view 默認(rèn)為絕對(duì)定位，top和left屬性為0px 當(dāng)movable-view小于movable-area時(shí)，movable-view的移動(dòng)范圍是在movable-area內(nèi)；當(dāng)movable-view大于movable-area時(shí)，movable-view的移動(dòng)范圍必須包含movable-area（x軸方向和y軸方向分開考慮）

參考鏈接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html

在具體項(xiàng)目中，可以優(yōu)化頁(yè)面效果，增加各種監(jiān)聽事件。應(yīng)用的話如做個(gè)拼圖游戲等，僅以舉個(gè)栗子，拋裝引玉，歡迎留言交流指正！