微信小程式自定義元件(Toast)

2021-08-24 23:16:51 字數 2008 閱讀 9778

一,自定義元件

1.元件模版和樣式

類似於頁面,自定義元件擁有自己的 wxml 模版和 wxss 樣式。元件模版的寫法與頁面模板相同。元件模版與元件資料結合後生成的節點樹,將被插入到元件的引用位置上。在元件模板中可以提供乙個 節點,用於承載元件引用時提供的子節點。

元件對應 wxss 檔案的樣式,只對元件wxml內的節點生效。編寫元件樣式時,需要注意以下幾點:

a.元件和引用元件的頁面不能使用id選擇器(#a)、屬性選擇器([a])和標籤名選擇器,請改用class選擇器。

b. 元件和引用元件的頁面中使用後代選擇器(.a .b)在一些極端情況下會有非預期的表現,如遇,請避免使用。

c.子元素選擇器(.a>.b)只能用於 view 元件與其子節點之間,用於其他元件可能導致非預期的情況。

d.繼承樣式,如 font 、 color ,會從元件外繼承到元件內。

一.component構造器 

component像頁面一樣由wxml、wxss、js和json4個檔案組成,且需要把這4個檔案放在同乙個目錄中。與頁面不一樣的是,component中的建構函式(也可以稱構造器)是component({}),而頁面中的建構函式是page({})。

三.如何使用自定義元件全域性自定義(toast)

4、toasttest.js的**如下:

let _compdata = 

let toastpannel = );

settimeout(function () )//自定義方法,根據編輯需求

}, 2000)

}}function toastpannel()

module.exports =

在_comdata中你可以新增你想展示的內容,如:title、pic等都可以往裡面塞,只是你要在樣式表中做相應的樣式處理即可;toastpannel物件中是包含了一些自定義的方法,如我的**中有切換元件顯示隱藏的開關和接收到的顯示內容;toastpannel是乙個建構函式,在這裡需要通過官方給出的getcurrentpages()方法獲取到要使用元件的當前頁,並且將該元件的data和相應的方法附加到當前頁面中,方便當前頁訪問;最後將該元件的建構函式暴露出來,讓其他頁面可以直接引用。

8、在需要使用該元件的頁面將模組引入,如我在目錄中的toast.wxml檔案中引入元件的模組:

9、在當前頁面的js檔案中例項元件的建構函式,如我的toast.js檔案中例項**:

onload方法中新增

使用方法

10、toast自定義元件實現的效果:

效果圖

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 a,b,c,d 父元素 首先是關於元件的建立 1 單獨建立乙個資料夾存放 wxss x.js wxml json這四個檔案,其中主要對元件進行宣告的是json檔案,需要寫入 這段 就是讓元件允許被使用,如果元件需要呼叫另乙個元件中,那麼就需要再usingcompe...

微信小程式自定義元件

根據專案需要,抽離出公共的元件。1 在專案根目錄新建乙個component的資料夾,然後新建自己需要的檔案 專案目錄如下 在component裡面我新建了3個子元件。2 子元件的寫法 只有js檔案格式不一樣,其他的檔案都正常寫。js需要自定義乙個component,參考 示例 component d...

微信小程式 自定義元件

建立自定義元件 元件的構成類似頁面,由json wxml wxss js 4個檔案組成。在新建乙個元件的時候需要在元件的json檔案中設定 components 字段 true 在元件wxss中不應使用id選擇器 屬性選擇器和標籤名選擇器。這句是官方說的,我想應該是會全域性汙染 自定義元件的js檔案...