小程序的更新中,也新增了一個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,表示能夠在任意方向上進行拖動。spa
拖動演示3d
在一個movable-area標籤中,其實不止能夠放一個movable-view,它支持放置多個movable-view,看如下例子:code
<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>
拖動演示2blog
movable-view的direction屬性支持如下四個值:io
all - 任意方向拖動class
vertical - 縱向拖動容器
horizontal - 橫向拖動程序
none - 不能拖動im
前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)的位置上了:
好了,小程序的拖動組件的功能大體就這樣簡單的介紹一下,但願對你有所幫助。