uniApp中uView组件库的丰富单元格方法

目录

基础功能

#自定义内容

#自定义大小

#展示右箭头

#跳转页面

#右侧内容垂直居中

#自定义插槽

---

当谈到uniapp的uView组件库中的单元格（Cell）方法时，我们需要了解它的基本功能和用法。

单元格是一种常用的UI元素，在移动应用程序中经常用于展示列表项或者特定内容。uView组件库提供了丰富的单元格样式和功能，可以方便快速地实现各种页面布局和交互效果。

uView组件库中的单元格主要包括以下几个方法和用法：

基础功能

• 该组件需要搭配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>

#自定义内容

• 通过插槽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>

如上所示，可以给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>

#展示右箭头

设置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>

#跳转页面

设置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>

#右侧内容垂直居中

设置center为true，可将右侧内容垂直居中

<u-cell-group>
    <u-cell
        title="单元格"
        value="内容"
        label="描述信息"
        center
    ></u-cell>
</u-cell-group>

#自定义插槽

设置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>

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

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

总的来说，uView组件库中的单元格方法提供了丰富的样式和功能选项，可以满足不同场景下的需求，帮助开发者快速构建出美观、灵活的列表页面和表单页面。利用单元格方法，开发者可以轻松实现各种复杂的列表展示效果，增加页面交互性，提升用户体验。