Vant Cell 单元格分析

发布时间：2023-04-20 11:24:43 所属栏目：教程来源：

导读：使用Vant Cell 按钮组件，需要先进行引用。

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell

使用Vant Cell 按钮组件，需要先进行引用。

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index"
}
基础用法
Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />
</van-cell-group>
单元格大小
通过size属性可以控制单元格的大小

<van-cell title="单元格" value="内容" size="large" />
<van-cell title="单元格" value="内容" size="large" label="描述信息" />
展示图标
通过icon属性在标题左侧展示图标

<van-cell title="单元格" icon="location-o" />
展示箭头
设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向

<van-cell title="单元格" is-link />
<van-cell title="单元格" is-link value="内容" />
<van-cell title="单元格" is-link value="内容" arrow-direction="down" />
页面跳转
可以通过url属性进行页面跳转，通过link-type属性控制跳转类型

<van-cell
is-link
title="单元格"
link-type="navigateto"
url="/pages/dashboard/index"
/>
分组标题
通过CellGroup的title属性可以指定分组标题

<van-cell-group title="分组1">
<van-cell title="单元格" value="内容" />
</van-cell-group>
<van-cell-group title="分组2">
<van-cell title="单元格" value="内容" />
</van-cell-group>
使用插槽
如以上用法不能满足你的需求，可以使用插槽来自定义内容

<van-cell value="内容" icon="shop-o" is-link>
<view slot="title">
<view class="van-cell-text">单元格</view>
<van-tag type="danger">标签</van-tag>
</view>
</van-cell>
<van-cell title="单元格">
<van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>
垂直居中
通过center属性可以让Cell的左右内容都垂直居中

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!