【笔记】微信小程序对 van-cell 中 value 的 icon 的自定义

简介: 微信小程序对 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

相关文章
|
14天前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
3月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
40 0
|
2月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
3月前
|
小程序
云笔记微信小程序模板
一款简单的云笔记,记事本,手机备忘录微信小程序页面模板。包含:添加记事本、内容编辑、用户反馈等。
63 0
|
3月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
99 0
|
3月前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
97 0
|
3月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
73 0
|
3月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
72 0
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
380 65
|
3天前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
27 7

热门文章

最新文章