微信小程式 原生元件

2022-05-29 01:48:07 字數 1013 閱讀 8001

1.原生元件:

camera/canvas/live-player/live-pusher/map/textarea/video/input(僅在focus時表現為原生元件)

2.原生元件的使用限制

(1)原生元件的層級是最高的

a.無論設定 z-index 為多少,都無法蓋在原生元件上

b.後插入的原生元件可以覆蓋之前的原生元件

c.解決層級限制:

<1>.使用cover-view/cover-image[原生]元件,但是只能覆蓋在部分原生元件上面

<2>.原生元件同層渲染

0.同層渲染是預設開啟的

1.在支援同層渲染後,原生元件與其它元件可以隨意疊加,有關層級的限制將不再存在

2.元件內部仍由原生渲染,樣式一般還是對原生元件內部無效

3.當前 video, map, live-player, live-pusher, canvas(2d) 元件已支援同層渲染

<3>原生元件相對層級

2.該 z-index 僅調整原生元件之間的層級順序,其層級仍高於其他非原生元件

(2)原生元件還無法在 picker-view 中使用

a.基礎庫 2.4.4 以下版本,原生元件不支援在 scroll-view、swiper、movable-view 中使用

(3)部分css樣式無法應用於原生元件

b.無法對原生元件設定 css 動畫

c.無法定義原生元件為 position:fixed

d.不能在父級節點使用 overflow: hidden 來裁剪原生元件的顯示區域

(4)原生元件的事件監聽限制

a.不能使用 bind:eventname 的寫法,只支援 bindeventname

b.原生元件也不支援 catch 和 capture 的事件繫結方式

(5)原生元件會遮擋 vconsole 彈出的除錯面板

a.原生元件在開發工具上是用web元件模擬的,因此很多情況並不能還原真機的表現,因此使用到原生元件盡量在真機上進行除錯

微信小程式元件

class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...

微信小程式 元件

官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...

原生微信小程式 安裝vant weapp

小程式開發者工具中 工具欄 構建npm 一 初始化package.json npm init二 安裝vant三 安裝依賴 npm install production 只安裝dependencies而不安裝devdependencies。四 構建npm 構建成功後會有提示,同時專案根目錄中會多出乙個...