淘宝上成都网站建设,珠海市官网网站建设价格,佛山建站公司模板,肃北蒙古族自治县建设局网站1 背景
在使用vant组件开发微信小程序的时候#xff0c;想更改vant组件内部样式#xff0c;达到自己想要的目的#xff08;van-grid组件改成宫格背景色为透明#xff0c;默认为白色#xff09;#xff0c;官网没有示例#xff0c;通过以下几步修改成功。
2 步骤
2.1 …1 背景
在使用vant组件开发微信小程序的时候想更改vant组件内部样式达到自己想要的目的van-grid组件改成宫格背景色为透明默认为白色官网没有示例通过以下几步修改成功。
2 步骤
2.1 查看官方文档
Grid 外部样式类支持修改Grid组件样式我们在组件上添加该属性即可文件如下
类名说明custom-class根节点样式类
2.2 wxml文件 van-grid column-num4 custom-classgrid border{{false}}van-grid-item use-slot wx:for{{ menuList }}navigator url{{item.pagePath}}view classcont-itemimage src/image/page/{{item.imgSrc}}/imagetext{{ item.name }}/text/view/navigator/van-grid-item/van-grid2.3 wxss文件
这里我们通过查看组件源码知晓应该修改.van-grid-item__content样式类代码如下
.grid .van-grid-item__content {background-color: rgba(255, 255, 255, 0);
}2.4 修改前后效果对比
修改前
修改后 注本教程仅适用于page页面更改vant组件样式若是自定义组件想修改vant组件样式就需要更改组件样式隔离属性大型项目不做推荐。
