前言
創(chuàng)新互聯(lián)建站主營淇縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),淇縣h5小程序設(shè)計搭建,淇縣網(wǎng)站營銷推廣歡迎淇縣等地區(qū)企業(yè)咨詢
小程序在520節(jié)日前夜,讓程序員們又躁動了一把,更新了一些很誘人的功能,如內(nèi)容轉(zhuǎn)發(fā)API,iBeacon API,振動API,屏幕亮度調(diào)節(jié)API等,也增強了地圖組件的功能。
此次的更新中,也新增了一個UI組件,它就是視圖組件movable-view,它需要配合movable-area來一起使用。簡單來說,它就是一個支持在指定區(qū)域內(nèi)可以拖動內(nèi)容的容器。
我們來看一個簡單的示例:
<movable-area > <movable-view direction="all" > </movable-view> </movable-area>
界面
我們用movable-area設(shè)定了一個200x200大小的一個可拖動區(qū)域(紅色),然后在這個區(qū)域內(nèi)放置了一個大小為50x50的可以拖動內(nèi)容movable-view(藍色),這個可拖動內(nèi)容的direction設(shè)置為all,表示可以在任意方向上進行拖動。
拖動演示
在一個movable-area標(biāo)簽中,其實不止可以放一個movable-view,它支持放置多個movable-view,看以下例子:
<movable-area > <!--藍色任意方向拖動的內(nèi)容--> <movable-view direction="all" > </movable-view> <!--黃色只能橫向拖動的內(nèi)容--> <movable-view direction="horizontal" > </movable-view> </movable-area>
界面2
拖動演示2
movable-view的direction屬性支持以下四個值:
前3個值好理解。如果direction設(shè)置為最后這個none,則只能依靠設(shè)置x,y屬性值來為它進行在movable-area中的定位:
<movable-area > <movable-view direction="none" x="50" y="50" > </movable-view> </movable-area>
這段代碼一運行,藍色的movable-view就顯示在了(50,50)的位置上了:
總結(jié)
好了,小程序的拖動組件的功能大致就這樣簡單的介紹一下,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對創(chuàng)新互聯(lián)的支持。
標(biāo)題名稱:微信小程序新增的拖動組件movable-view使用教程
鏈接URL:http://www.chinadenli.net/article32/ippppc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、網(wǎng)站內(nèi)鏈、微信公眾號、自適應(yīng)網(wǎng)站、App開發(fā)、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)