cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基础功能
- 该组件需要搭配
cell-group使用，并由它实现列表组的上下边框，如不需要上下边框，配置cellGroup的border参数为false即可。 - 通过
title设置左侧标题，value设置右侧内容。 - 通过
icon字段设置图标，，或者图片链接(本地文件建议使用绝对地址)。
注意： 由于cell组件需要由cellGroup组件提供参数值，这些父子组件间通过Vue的"provide/inject"特性注入依赖， 所以您必须使用cellGroup包裹cell组件才能正常使用。
<template> <u-cell-group> <u-cell icon="setting-fill" title="个人设置"></u-cell> <u-cell icon="integral-fill" title="会员等级" value="新版本"></u-cell> </u-cell-group> </template>
copy
#自定义内容
- 通过插槽
icon可以自定义图标，内容会替换左边图标位置 - 通过插槽
title定义左边标题部分 - 通过插槽
right-icon定义右边内容部分
<u-cell-group> <u-cell 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> <u-cell icon="setting-fill" title="只是近黄昏"></u-cell> </u-cell-group>
copy
如上所示，可以给cell组件通过slot="right-icon"设定右边uView自带的badge或者switch组件：
- 如果搭配的是
badge组件，注意设置absolute参数为false去掉绝对定位，否则其位于右侧的恰当位置，详见Badge 徽标数。 - 如果搭配的是
switch组件，注意要通过v-model绑定一个内容为布尔值的变量，否则无法操作switch，详见Switch 开关选择器。
#自定义大小
设置size可自定义大小
<u-cell-group> <u-cell size="large" title="单元格" value="内容" isLink ></u-cell> <u-cell size="large" title="单元格" value="内容" label="描述信息" ></u-cell> </u-cell-group>
copy
#展示右箭头
设置isLink为true，将会显示右侧的箭头，可以通过arrow-direction控制箭头的方向
<u-cell-group> <u-cell icon="share" title="停车坐爱枫林晚" :isLink="true" arrow-direction="down"></u-cell> <u-cell icon="map" title="霜叶红于二月花" :isLink="false"></u-cell> </u-cell-group>
copy
#跳转页面
设置isLink为true，单元格点击可跳转页面,传入url设置跳转地址
<u-cell-group> <u-cell title="打开标签页" isLink url="/pages/componentsB/tag/tag" ></u-cell> <u-cell title="打开徽标页" isLink url="/pages/componentsB/badge/badge" ></u-cell> </u-cell-group>
copy
#右侧内容垂直居中
设置center为true，可将右侧内容垂直居中
<u-cell-group> <u-cell title="单元格" value="内容" label="描述信息" center ></u-cell> </u-cell-group>
copy
#自定义插槽
设置slot为title，可自定义左侧区域内容 设置slot为value，可自定义右侧区域内容
<u-cell-group> <u-cell value="内容"> <view slot="title" class="u-slot-title" > <text class="u-cell-text">单元格</text> <u-tag text="标签" plain size="mini" type="warning" > </u-tag> </view> </u-cell> <u-cell title="单元格" isLink > <text slot="value" class="u-slot-value" >99</text> </u-cell> </u-cell-group>
copy
/* App.vue */ .cell-hover-class { background-color: rgb(235, 237, 238); } /* 或者单是设置透明度 */ .cell-hover-class { opacity: 0.5; }
