Vant 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="描述信息" />
API
API使用参数介绍表