一、前言
vant组件 是微信小程序里非常热门的 UI 组件。选用组件而不是自己手写的原因也很明显:降低复杂度,隐藏无关细节。接下来主要介绍,如何在微信小程序上 仿造出下方的 京东选择按钮面板:
二、组件选择:van-tag
为什么不选择 van-button 呢?因为 van-button不支持 自定义 背景颜色(background-color),除非更改 van-button 的源码。
三、尝试过程
然后接下来,需要解决的问题,就是字体的颜色问题。van-tag只提供了 更改背景色的接口,van-tag内部的字体颜色默认是白色,我们期望的颜色是深灰色。怎么解决这个问题呢?
我一开始的设想是使用 van-tag 的 custom-class 这个接口,传入颜色为 深灰色的类(我传入的类的名字叫 tag)。但是在开发者工具中预览,发现颜色并没有更改。在于是使用调试面板审查 css,发现传入的类的优先级是最低的,所以如果和原组件的类的属性冲突的话,传入的属性是会被原属性覆盖的 :
于是又想到了第二个解决办法,向van-tag中传入组件:
因为 van-tag 和 v