Cell 单元格

Cell 单元格 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 该组件需要搭配cell-group使用，并由它实现列表组的上下边框，如不需要上下边框，配置cellGroup的border参数为false即可。
• 通过title设置左侧标题，value设置右侧内容。
• 通过icon字段设置图标，值为uView自带的Icon 图标名。

注意： 由于cell组件需要由cellGroup组件提供参数值，这些父子组件间通过Vue的"provide/inject"特性注入依赖， 所以您必须使用cellGroup包裹cell组件才能正常使用。

<template>
	<u-cell-group>
		<u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
		<u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
	</u-cell-group>
</template>

自定义内容

• 通过插槽icon可以自定义图标，内容会替换左边图标位置
• 通过插槽title定义左边标题部分
• 通过插槽right-icon定义右边内容部分

<u-cell-group>
	<u-cell-item  title="夕阳无限好" arrow-direction="down">
		<u-icon slot="icon" size="32" name="search"></u-icon>
		<!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
		<u-switch slot="right-icon" v-model="checked"></u-switch>
	</u-cell-item>
	<u-cell-item icon="setting-fill" title="只是近黄昏"></u-cell-item>
</u-cell-group>

如上所示，可以给cell-item组件通过slot="right-icon"设定右边uView自带的badge或者switch组件：

• 如果搭配的是badge组件，注意设置absolute参数为false去掉绝对定位，否则其位于右侧的恰当位置，详见Badge 徽标数。
• 如果搭配的是switch组件，注意要通过v-model绑定一个内容为布尔值的变量，否则无法操作switch，详见Switch 开关选择器。

展示右箭头

设置arrow为true，将会显示右侧的箭头，可以通过arrow-direction控制箭头的方向

<u-cell-group>
	<u-cell-item icon="share" title="停车坐爱枫林晚" :arrow="true" arrow-direction="down"></u-cell-item>
	<u-cell-item icon="map" title="霜叶红于二月花" :arrow="false"></u-cell-item>
</u-cell-group>

分组标题

通过cell-group的title参数可以指定分组标题

<u-cell-group title="设置喜好">
	<u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
	<u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
</u-cell-group>

是否开启点击反馈

如果将arrow参数设置为true，意味着这是一个可点击的Cell，默认会给一个点击的反馈效果，如果您想自定义这个反馈效果，可以通过 hover-class参数传入一个样式类名，这个类必须写在全局样式中，如App.vue、或通过Apop.vue引入的全局样式中，一般建议定义反馈的背景颜色，或者是透明度即可。 如果不想要任何效果，将hover-class设置为none即可。

<u-cell-group title="设置喜好">
	<u-cell-item icon="setting-fill" title="个人设置" hover-class="cell-hover-class"></u-cell-item>
</u-cell-group>

/* App.vue */
.cell-hover-class {
	background-color: rgb(235, 237, 238);
}

/* 或者单是设置透明度 */
.cell-hover-class {
	opacity: 0.5;
}

API

CellGroup Props

CellItem Props

CellItem Slot

CellItem Event