目之瞬间-专注于互联网平台

小程序 Vant Weapp 使用插槽自定义 Cell 的左侧图标

Vant Weapp 官方文档.

一、van-cell左侧图标的icon只能为限定的图标名称或图片链接

在使用van-cell单元格时,通过icon属性在标题左侧可以展示图标;

<van-cell title="单元格" icon="location-o" />
  • 1

效果如下:
在这里插入图片描述
但左侧图标的icon只能为限定的图标名称或图片链接
在这里插入图片描述
通过Icon组件的名称可更换图标
在这里插入图片描述

二、使用插槽自定义van-cell的左侧图标

使用插槽能力,可以在官方文档中关注以下2处使用说明,

  • 一是使用示例:
    在这里插入图片描述
  • 二是插槽Slot的名称:
    从下图可以看到,自定义左侧图标icon的插槽名称为icon
    在这里插入图片描述
    因此,使用插槽自定义左侧图标的代码如下:
wxml: <van-cell center title="自定义左侧图标" is-link>   <image >='mine_headicon' src='../../../image/icn_man.png' slot="icon"></image> </van-cell>
  • 1
  • 2
  • 3
  • 4
wxss:.mine_headicon{   data-report-click="{"spm":"1001.2101.3001.4259"}">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

效果如下:
在这里插入图片描述

分享到:

上一篇:微信小程序购物车功能实现(干货满满)

下一篇:微信小程序实现将图片保存到手机相册