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

Vant Weapp 官方文档.

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

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

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

效果如下：

但左侧图标的icon只能为限定的图标名称或图片链接

通过Icon组件的名称可更换图标

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

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

• 一是使用示例：
  
• 二是插槽Slot的名称：
  从下图可以看到，自定义左侧图标icon的插槽名称为icon
  
  因此，使用插槽自定义左侧图标的代码如下：

wxml:
 <van-cell center title="自定义左侧图标" is-link>
   <image class='mine_headicon' src='../../../image/icn_man.png' slot="icon"></image>
 </van-cell>

wxss:
.mine_headicon{
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}

效果如下：