个人网站命名,wordpress手机端底部导航,哪个网站能查是否做股东,静态网站怎么做✅作者简介#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者#xff0c;修心和技术同步精进。 #x1f34e;个人主页#xff1a;Java Fans的博客 #x1f34a;个人信条#xff1a;不迁怒#xff0c;不贰过。小知识#xff0c;大智慧。 #x1f49e;当前专栏… ✅作者简介2022年博客新星 第八。热爱国学的Java后端开发者修心和技术同步精进。 个人主页Java Fans的博客 个人信条不迁怒不贰过。小知识大智慧。 当前专栏微信小程序学习分享 ✨特色专栏国学周更-心性养成之路 本文内容微信小程序——van-field中的left-icon属性自定义 文章目录 前言原始效果期望效果 前言 在小程序中我们是用 Vant 组件库时常常会用到 van-field 输入框控件详细用法我就不过度阐述了可以参考官方文档Field 输入框使用。 今天我将跟大家分享的是 van-field 输入框控件中的 left-icon 属性的自定义怎么实现。
原始效果 上面效果的代码如下
login.wxml: view classinput-containervan-cell-groupvan-field model:value{{ username }} left-iconmanager placeholder请输入用户名/手机号 border{{ true }} //van-cell-group/viewview classinput-containervan-cell-groupvan-field model:value{{ password }} type{{ showPassword ? text : password }} icon{{ showPassword ? closed-eye : eye-o }} bind:click-icontogglePassword left-iconlock placeholder请输入密码 border{{ true }} //van-cell-groupicon type{{ showPassword ? eye : closed-eye }} size20 bindtaptogglePassword //viewview classinput-containervan-field model:value{{ captcha }} left-iconphoto colorred placeholder图形验证码 border{{ true }} /van-image width80 height40 src{{captchaUrl}} bind:clickrefreshCaptcha //view从上面代码我们可以看出来 left-icon 使用的是 Vant 组件中的默认图标那我们怎么修改呢请看下面~
期望效果 将原始效果中的图标更换为上面这种样式或是自定义是怎么做到的呢
首先我们从 阿里巴巴矢量图标库 中下载这三个图标的png图片可选择你需要的颜色。 login.wxml 代码如下 view classinput-containervan-cell-groupvan-field model:value{{ username }} left-icon{{userIcon}} placeholder请输入用户名/手机号 border{{ true }} //van-cell-group/viewview classinput-containervan-cell-groupvan-field model:value{{ password }} type{{ showPassword ? text : password }} icon{{ showPassword ? closed-eye : eye-o }} bind:click-icontogglePassword left-icon{{pwdIcon}} placeholder请输入密码 border{{ true }} //van-cell-groupicon type{{ showPassword ? eye : closed-eye }} size20 bindtaptogglePassword //viewview classinput-containervan-field model:value{{ captcha }} left-icon{{yzmIcon}} colorred placeholder图形验证码 border{{ true }} /van-image width80 height40 src{{captchaUrl}} bind:clickrefreshCaptcha //viewlogin.js 代码如下 data: {yzmIcon:/static/验证码.png,pwdIcon:/static/密码.png,userIcon:/static/我的.png},素材的存放位置如下 至此我们就完美解决了微信小程序van-field控件中 left-icon 自定义图片功能。 码文不易本篇文章就介绍到这里如果想要学习更多Java系列知识点击关注博主博主带你零基础学习Java知识。与此同时对于日常生活有困扰的朋友欢迎阅读我的第四栏目《国学周更—心性养成之路》学习技术的同时我们也注重了心性的养成。
