【实战】前端必会 —— 微信小程序对 van-cell 中 value 的 icon 的自定义

文章目录

• 一、需求
• 二、问题
• 三、解决

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！