微信小程式自定義元件注意事項

2022-03-10 17:52:54 字數 1766 閱讀 6210

自定義元件官方文件介紹:

component元件官方文件介紹:

在components資料夾下新建目錄select,建立select下拉選項卡元件

①select.wxml檔案

}

}

tips:(1) animation="}" 是下箭頭的動畫效果

(2) data-index="}" 是當前元素被點選時的索引

(3) selecttoggle是模仿下拉選項框隱藏和顯示的事件。

(4) settext是模仿下拉選項框選擇子項之後,設定內容的事件。

(5) selectshow是表示option選項顯示與否

②select.wxss檔案

.com-selectbox 

.com-scontent

.com-simg

.com-stxt

.com-slist

.com-sitem

.com-sitem:first-child

.check-style

③selece.js
component(,

nowtext:

},// 元件的初始資料

data: , //右邊箭頭的動畫

showid: 0,//當前選中索引

},// 元件宣告週期

lifetimes: );

},detached: function() ,

},// 元件的方法列表

methods: )

this.animation = animation;

if (nowshow) )

} else )

}this.setdata()

},//設定內容

settext: function(e) )

this.setdata()}}

}})

tips:(1) 如果想對data裡的資料做初始化,必須自己給他初始值。

(2) 不要把data和properties裡的變數設定成同乙個名字,如果他們名字相同,properties裡的會覆蓋data裡的

(3) 元件宣告週期中的 attached 方法在元件例項進入頁面節點樹時執行,我理解為和頁面生命週期中的 onload 方法效果一致

(4) animation動畫官方文件:

在使用元件頁面的json檔案中配置

"usingcomponents":
tips:注意路徑是否正確, / 單斜槓表示根目錄,是絕對路徑。

tips:prop-array為自定義的屬性名,和元件所在的 js 中properties中的屬性是對應的。

在  properties 定義的屬性中,屬性名採用駝峰寫法(例如:proparray)。

在引入元件的 wxml 中,指定屬性值時則對應使用連字元寫法(例如:prop-array=」…」)。

在引用元件頁面的.js檔案中的data中傳入資料

data: , , , ]

}

效果圖:

參考部落格:

end!

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 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檔案...