微信開發新增拖動組件--movableview介紹

小程序的更新中，也新增了一個UI組件，它就是視圖組件movable-view，它須要配合movable-area來一塊兒使用。簡單來講，它就是一個支持在指定區域內能夠拖動內容的容器。咱們來看一個簡單的示例：

<movable-area style="height: 200px;width: 200px;background: red;">
  <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
  </movable-view>
</movable-area>

 

咱們用movable-area設定了一個200x200大小的一個可拖動區域(紅色)，而後在這個區域內放置了一個大小爲50x50的能夠拖動內容movable-view（藍色），這個可拖動內容的direction設置爲all，表示能夠在任意方向上進行拖動。

拖動演示

在一個movable-area標籤中，其實不止能夠放一個movable-view，它支持放置多個movable-view，看如下例子：

 

<movable-area style="height: 200px;width: 200px;background: red;">
 
  <!--藍色任意方向拖動的內容-->
  <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
  </movable-view>
 
  <!--黃色只能橫向拖動的內容-->
  <movable-view direction="horizontal" style="height: 20px; width: 50px; background: yellow;">
  </movable-view>
 
</movable-area>

 

拖動演示2

movable-view的direction屬性支持如下四個值：

• all - 任意方向拖動

• vertical - 縱向拖動

• horizontal - 橫向拖動

• none - 不能拖動

前3個值好理解。若是direction設置爲最後這個none，則只能依靠設置x,y屬性值來爲它進行在movable-area中的定位：

 

<movable-area style="height: 200px;width: 200px;background: red;">
  <movable-view direction="none" x="50" y="50" style="height: 50px; width: 50px; background: blue;">
  </movable-view>
</movable-area>

 

這段代碼一運行，藍色的movable-view就顯示在了(50,50)的位置上了：

 

好了，小程序的拖動組件的功能大體就這樣簡單的介紹一下，但願對你有所幫助。