uView

# 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 title="读万卷书" :theme="theme">
		<u-cell-item center :is-link="true" :label="label" value="铁马冰河" index="index" @click="click" :hover-class="hoverClass"
			:arrow="arrow" :title="title" :icon="icon">
			<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
			<u-switch :theme="theme" v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
		</u-cell-item>
		<u-cell-item :radio="radio"  title="铁马冰河入梦来" value="右侧内容" :arrow="false">
			<!-- <u-icon slot="right-icon" size="34" name="calendar"></u-icon> -->
			<u-checkbox :theme="theme" v-if="radio" slot="icon" v-model="radioChecked"></u-checkbox>
			<u-field slot="value"></u-field>
		</u-cell-item>
		<u-cell-item  title="铁马冰河入梦来" value="右侧内容" :arrow="false">
			<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
			<!-- <u-icon slot="right-icon" size="34" name="calendar"></u-icon> -->
			<u-field slot="value"></u-field>
		</u-cell-item>
		<u-cell-item title-width="360" :border-bottom="false" title="铁马冰河入梦来,铁马冰河入梦来" value="右侧内容" :arrow="false">
			<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
			<!-- <u-icon slot="right-icon" size="34" name="calendar"></u-icon> -->
			<u-field slot="value"></u-field>
		</u-cell-item>
	</u-cell-group>
</template>

<script>
	export default {
		data() {
			return {
				icon: 'setting',
				arrow: true,
				radio: false,
				label: '',
				title: '青山一道同云雨',
				rightSlot: true,
				checked: false,
				radioChecked: false,
				theme: 'normal',
			}
		},
		computed: {
			hoverClass() {
				// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上
				return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
			}
		},
		methods: {
			click(index) {
				console.log(index);
			}
		}
	};
</script>

# 自定义内容

  • 通过插槽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-checkbox v-if="radio" slot="icon" v-model="radioChecked"></u-checkbox>
		<!-- <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

参数 说明 类型 默认值 可选值
theme
FPI
 主题模式，普通模式normal，关怀模式care String normal care
title 分组标题 String - -
border 是否显示外边框 Boolean true false
title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'} object - -

# CellItem Props

参数 说明 类型 默认值 可选值
title 左侧标题 String - -
icon 左侧图标名，只支持uView内置图标，见Icon 图标 String - -
icon-style
1.4.0
 icon的样式，对象形式 Object - -
value 右侧内容 String - -
label 标题下方的描述信息 String - -
border-bottom 是否显示cell的下边框 Boolean true false
border-top 是否显示cell的上边框 Boolean false true
border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔
1.4.0已废弃
 Boolean true false
hover-class 是否开启点击反馈，none为无效果，见上方说明 String - none
arrow 是否显示右侧箭头，开启的话，将会默认带上点击反馈，可通过hover-class配置 Boolean true false
arrow-direction 箭头方向，可选值为 String right up / down
title-style 标题样式，对象形式 Object - -
required 是否显示左边表示必填的星号 Boolean false true
value-style 右侧内容样式，对象形式 Object - -
label-style 标题下方描述信息的样式，对象形式 Object - -
bg-color 背景颜色，默认透明背景 String transparent -
index 用于在click事件回调中返回，标识当前是第几个Item String | Number - -
title-width 标题的宽度，单位rpx Number | String - -
icon-size 左边通过icon参数传入的图标的大小，单位rpx Number | String 34 -
center 是否使内容垂直居中 Boolean false true

# CellItem Slot

名称 说明
title 自定义左侧标题部分的内容，如需使用，请勿定义title参数，或赋值null即可
icon 自定义左侧的图标
right-icon 自定义右侧图标内容，需设置arrow为false才起作用
label 自定义label内容，需同时设置use-label-slot为true

# CellItem Event

事件名 说明 回调参数
click 点击cell列表时触发 index: 通过props传递的index参数

← Badge 徽标数 →