建站
咨詢
售后
建站咨詢
新聞中心
微信小程序 WeUI·Cell 是微信官方推出的一套基于微信客戶端的 UI 組件庫(kù)，它提供了豐富的基礎(chǔ)組件和樣式，可以幫助開(kāi)發(fā)者快速構(gòu)建出符合微信風(fēng)格的小程序界面，WeUI·Cell 組件庫(kù)主要包括 Cell、Cellgroup、Dialog、Toast、ActionSheet 等組件，這些組件可以滿足大部分小程序界面的需求。
WeUI·Cell 組件介紹
1、Cell 組件
Cell 組件是 WeUI·Cell 的核心組件，它可以看作是一個(gè)容器，用于承載其他子組件，Cell 組件具有以下特點(diǎn)：
支持自定義樣式，可以通過(guò)設(shè)置樣式屬性來(lái)調(diào)整 Cell 的外觀；
支持橫向滾動(dòng)，當(dāng) Cell 的內(nèi)容超出屏幕寬度時(shí)，可以通過(guò)設(shè)置 scrollx 屬性來(lái)實(shí)現(xiàn)橫向滾動(dòng)；
支持縱向滾動(dòng)，當(dāng) Cell 的內(nèi)容超出屏幕高度時(shí)，可以通過(guò)設(shè)置 scrolly 屬性來(lái)實(shí)現(xiàn)縱向滾動(dòng)；
支持點(diǎn)擊事件，可以通過(guò)設(shè)置 bindtap 屬性來(lái)監(jiān)聽(tīng) Cell 的點(diǎn)擊事件。
2、Cellgroup 組件
Cellgroup 組件是一個(gè)容器組件，用于將多個(gè) Cell 組件組合在一起，Cellgroup 組件具有以下特點(diǎn)：
支持嵌套使用，可以在 Cellgroup 內(nèi)部再嵌套一個(gè)或多個(gè) Cellgroup；
支持水平排列，可以通過(guò)設(shè)置 style="display: flex; flexdirection: row;" 來(lái)實(shí)現(xiàn) Cellgroup 內(nèi)部的 Cell 組件水平排列；
支持垂直排列，可以通過(guò)設(shè)置 style="display: flex; flexdirection: column;" 來(lái)實(shí)現(xiàn) Cellgroup 內(nèi)部的 Cell 組件垂直排列；
支持分割線，可以通過(guò)設(shè)置 borderbottom 屬性來(lái)為 Cellgroup 添加分割線。
3、Dialog 組件
Dialog 組件是一個(gè)彈出層組件，用于在小程序中展示提示信息或者操作選項(xiàng)，Dialog 組件具有以下特點(diǎn)：
支持自定義樣式，可以通過(guò)設(shè)置樣式屬性來(lái)調(diào)整 Dialog 的外觀；
支持標(biāo)題和內(nèi)容，可以通過(guò)設(shè)置 title、content 屬性來(lái)設(shè)置 Dialog 的標(biāo)題和內(nèi)容；
支持按鈕組，可以通過(guò)設(shè)置 button 屬性來(lái)設(shè)置 Dialog 的底部按鈕；
支持取消和確認(rèn)按鈕，可以通過(guò)設(shè)置 cancel、confirm 屬性來(lái)設(shè)置取消和確認(rèn)按鈕的事件處理函數(shù)。
4、Toast、ActionSheet 組件
Toast、ActionSheet 組件分別用于實(shí)現(xiàn)消息提示和操作選項(xiàng)彈出功能，這兩個(gè)組件的使用方式與 Dialog 組件類似，這里不再贅述。
WeUI·Cell 組件使用示例
以下是一個(gè)簡(jiǎn)單的 WeUI·Cell 組件使用示例：
單元格1 | 單元格2 | 單元格3 | 單元格4 | 單元格5 | 單元格6 | 單元格7 | 單元格8 | 單元格9 | 單元格10 | 單元格11 | 單元格12 | 單元格13 | 單元格14 | 單元格15 | 單元格16 | 單元格17 | 單元格18 | 單元格19 | 單元格20 | 單元格21 | 單元格22 | 單元格23 | 單元格24 | 單元格25 | 單元格26 | 單元格27 | 單元格28 | 單元格29 | 單元格30 | 單元格31 | 單元格32 | 單元格33 | 單元格34 | 單元格35 | 單元格36 | 單元格37 | 單元格38 | 單元格39 | 單元格40 | 單元格41 | 單元格42 | 單元格43 | 單元格44 | 單元格45 | 單元格46 | 單元格47 | 單元格48 | 單元格49 | 單元格50 | 提示信息 取消 | 確定
/* index.wxss */
.container {
display: flex;
justifycontent: center;
alignitems: center;
}
// index.js
Page({});
相關(guān)問(wèn)題與解答
1、Q：如何在 WeUI·Cell 組件中實(shí)現(xiàn)橫向滾動(dòng)？
A：在需要橫向滾動(dòng)的 Cell 組件中，設(shè)置 scrollx="true" 即可實(shí)現(xiàn)橫向滾動(dòng)。
分享名稱：微信小程序WeUI·Cell
本文網(wǎng)址：http://fisionsoft.com.cn/article/cdcciep.html
