Cell 单元格 - Vant Weapp

van-cell 功能不多说

一、需求

UI设计图中涉及在cell右侧的value的左侧需要添加一个小图标

二、问题

van-cell中：

• icon：title 左侧图标
• slot：icon：同上，如果设置了 icon 属性则不生效
• slot：right-icon：value 右侧图标，默认是 arrow，如果设置了 is-link 属性则不生效

若想要value左侧设置图标，有些束手无策。。。

三、解决

使用 icon 和 right-icon，使用绝对定位，位置通过 left/right 控制（仅限于内容长度固定的地方）

/* right-icon */
.单个van-cell的自定义类名 .van-icon {
  position: absolute;
  left: 300rpx;
}
/* icon */
.单个van-cell的自定义类名 .van-cell__left-icon-wrap{
  position: absolute;
  right: 90rpx;
}

注：

• slot 形式可以单独为 icon 绑定事件
• 若是长度不固定就需要在 xwml 中通过变量计算的形式计算偏移量了（注意全角和半角的区别）：

nickName.replace(/[^\x00-\xff]/g,"01").length

over