新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
創(chuàng)新互聯(lián)小程序教程:微信小程序WeUI·Cell
Cell
Cell是列表或者是表單的一項(xiàng),常用于設(shè)置頁(yè)的展示,或者用在表單中,作為表單的每一個(gè)要填寫(xiě)的項(xiàng),Cell必須要放在Cells組件的下面。

示例代碼:
{
"usingComponents": {
"mp-cells": "../components/cells/cells",
"mp-cell": "../components/cell/cell",
"mp-slideview": "../components/slideview/slideview"
}
}
Cell
列表
標(biāo)題文字(使用slot)
說(shuō)明文字
var base64 = require("../images/base64");
Page({
onLoad: function(){
this.setData({
icon: base64.icon20,
slideButtons: [{
text: '普通',
src: '/page/weui/cell/icon_love.svg', // icon的路徑
},{
text: '普通',
extClass: 'test',
src: '/page/weui/cell/icon_star.svg', // icon的路徑
},{
type: 'warn',
text: '警示',
extClass: 'test',
src: '/page/weui/cell/icon_del.svg', // icon的路徑
}],
});
},
slideButtonTap(e) {
console.log('slide button tap', e.detail)
}
});屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在組件內(nèi)部結(jié)構(gòu)的class,可用于修改組件內(nèi)部的樣式 | |
| icon | string | 否 | Cell的最左側(cè)的icon,是本地圖片的路徑,icon和名為icon的slot互斥 | |
| title | string | 否 | Cell最左側(cè)的標(biāo)題,一般用在Form表單組件里面,icon和title二選一,title和名為title的slot互斥 | |
| hover | boolean | false | 否 | 是否有hover效果 |
| link | boolean | false | 否 | 右側(cè)是有跳轉(zhuǎn)的箭頭,v1.0后的版本,link: true 會(huì)自帶 hover 效果 |
| value | string | 是 | Cell的值,和默認(rèn)的slot互斥 | |
| show-error | boolean | false | 否 | 用在Form表單組件里面,在表單校驗(yàn)出錯(cuò)的時(shí)候是否把Cell標(biāo)為warn狀態(tài) |
| prop | string | 否 | 用在Form表單組件里面,需要校驗(yàn)的表單的字段名 | |
| footer | string | 否 | Cell右側(cè)區(qū)域的內(nèi)容,和名為footer的slot互斥 | |
| inline | boolean | 否 | 用在Form表單組件里面,表示表單項(xiàng)是左右顯示還是上下顯示 |
Slot
| 名稱 | 描述 |
|---|---|
| icon | 左側(cè)圖標(biāo)slot |
| title | 標(biāo)題slot |
| 默認(rèn) | 內(nèi)容slot |
| footer | 右側(cè)區(qū)域slot |
當(dāng)前名稱:創(chuàng)新互聯(lián)小程序教程:微信小程序WeUI·Cell
當(dāng)前鏈接:http://m.fisionsoft.com.cn/article/cohhheo.html


咨詢
建站咨詢
