玩转Vant的第三天（最详细、保姆级Cell篇）

目录

一、对于Vant的Cell

（一）、Cell的基础用法

（二）、Cell的卡片风格（insert）

（三）、Cell的单元格大小（size）

（四）、Cell的展示图标（icon）

（五）、Cell的展示箭头（is-link）

（六）、Cell的页面跳转（url）

（七）、Cell的分组标题（van-cell-group title=""）

（八）、Cell的插槽

---

一、对于Vant的Cell

（一）、Cell的基础用法

        tips：以下所有代码均是官方代码，样式还需自己调整

<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" border="{
  { false }}" />
</van-cell-group>

        在使用cell的时候就推荐使用group进行包裹组合使用；其中 title 是标题，可以自定义标题，通过 :title="{ { 自定义的变量 }}" 即可，其他的元素也是同理可自定义

 

        使用之后发现这个样式怎么是这么的拥挤？？？点击查看这个模块的样式，发现宽度并不是使用一个固定或者全部宽度，所以只需要在这个的模块上加一个class即可，看我注释掉的代码，最终的效果如下：（以下所有代码均是如此）

        一般这种情况基本上都是单个使用，如果数据是多个的，那么可以通过for循环进行循环显示多条数据即可（以下文章同理）

---

（二）、Cell的卡片风格（insert）

        顾名思义就是将cell进行卡片化，将背景进行缩小并以白色输出渲染

        tips：通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

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