2023年微信小程序視圖容器 movable-area
微信小程序視圖容器movable-area是一個可移動的區(qū)域,在頁面中可以拖拽滑動。對于那些需要在小程序中加入拖拽和滑動操作的企業(yè)來說,movable-area與movable-view組合的使用,提供了非常好用的解決方案。
1. movableView的特點
movableView具體有哪些特點呢?除了上述介紹的可移動、拖拽和滑動以外,它還具有以下幾個屬性:
direction
:移動方向,有all、vertical、horizontal、none四種選擇;inertia
:是否帶有慣性;out-of-bounds
:超過可移動區(qū)域后是否還可以移動;x
和y
:分別代表x軸和y軸方向的偏移;damping
:控制x或y改變時的動畫和過界回彈的動畫,值越大移動越快;friction
:控制慣性滑動的動畫,值越大摩擦力越大,滑動越快停止;必須大于0,否則會被設(shè)置為默認(rèn)值。
2. movableArea與movableView的使用
同時,我們需要注意以下幾點:
movable-view必須在<movable-area/>組件中,并且必須是直接子節(jié)點,否則不能移動。
并且,在使用時,我們需要給movable-area設(shè)置height和width屬性,默認(rèn)情況下為10px。如果movable-view小于movable-area,則移動范圍是在movable-area內(nèi);反之,范圍必須包含movable-area(沿x軸和y軸分別考慮)。
3.示例代碼
<view style="height:300px;">
<movable-area style="height: 200px;width: 200px;background: red;">
<movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
</movable-view>
</movable-area>
</view>
Page({
data: {
x: 0,
y: 0
}
})
通過上述示例代碼,可以看到movable-view就像一個單獨的視圖組件一樣被嵌入到了movable-area中,可以隨意拖拽和滑動進(jìn)行移動操作。如此方便實用的movable-area該得到大家的青睞。如果貴企業(yè)在小程序中需要加入拖拽、滑動操作,那么不妨考慮采用movable-area與movable-view組合的方式。
<本文由himall原創(chuàng),商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請標(biāo)明:himall原創(chuàng)>
滿足不同行業(yè)發(fā)展電商的需求,HiMall更有針對性的提供不同行業(yè)內(nèi)的電商解決方案
-
跨境電商解決方案
支持直郵/保稅模式
對接海關(guān)/保稅倉
支持多國國際語言
對接Paypal國際支付
幫助跨境外貿(mào)企業(yè)搭建跨境進(jìn)口/出口電商平臺,搶占國際電商市場,針對企業(yè)需求定制個性化跨境電商解決方案 -
分賬解決方案
迎合金融監(jiān)管要求
規(guī)避“二清”結(jié)算
節(jié)約平臺財務(wù)成本
降低平臺招商成本
在合法、合規(guī)的前提下,為電商平臺提供資金收付、賬戶管理、資金合規(guī)等一體化整體解決方案 -
B2B批發(fā)解決方案
多級階梯批發(fā)價
布局全渠道批發(fā)入口
專屬批發(fā)訂貨市場
銀聯(lián)B2B大額支付
為企業(yè)快速搭建綜合性B2B批發(fā)電商平臺,整合線下批發(fā)資源,拓展線上批發(fā)渠道,實現(xiàn)批發(fā)業(yè)務(wù)24小時在線經(jīng)營
-
MRO工業(yè)品采購平臺系統(tǒng)|MRO工業(yè)品采購平臺系統(tǒng)有哪些功能
最新消息:MRO工業(yè)品采購平臺系統(tǒng) 是一款集產(chǎn)、研、銷于一體的綜合性解決方案,專為解決工業(yè)品企業(yè)的采購難題而設(shè)計。該系統(tǒng)通過...詳情
-
電子元器件采購商城系統(tǒng)|電子元器件采購商城系統(tǒng)有哪些功能
最新消息:電子元器件采購商城系統(tǒng) 是專為滿足電子元器件行業(yè)復(fù)雜業(yè)務(wù)流程需求而設(shè)計的綜合性平臺。它不僅提供了全面的技術(shù)支持...詳情
【本站聲明】
1、本網(wǎng)站發(fā)布的該篇文章,目的在于分享電商知識及傳遞、交流相關(guān)電商信息,以便您學(xué)習(xí)或了解電商知識,請您不要用于其他用途;
2、該篇文章中所涉及的商標(biāo)、標(biāo)識的商品/服務(wù)并非來源于本網(wǎng)站,更非本網(wǎng)站提供,與本網(wǎng)站無關(guān),系他人的商品或服務(wù),本網(wǎng)站對于該類商標(biāo)、標(biāo)識不擁有任何權(quán)利;
3、本網(wǎng)站不對該篇文章中所涉及的商標(biāo)、標(biāo)識的商品/服務(wù)作任何明示或暗示的保證或擔(dān)保;
4、本網(wǎng)站不對文章中所涉及的內(nèi)容真實性、準(zhǔn)確性、可靠性負(fù)責(zé),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細(xì)的資訊,請您直接與該類商品/服務(wù)的提供者聯(lián)系。