微信小程序修改vant组件样式

最新推荐文章于 2024-11-22 16:39:31 发布

Saga Two

最新推荐文章于 2024-11-22 16:39:31 发布

阅读量4.4k

点赞数 3

分类专栏：微信小程序笔记文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/m0_46309087/article/details/132646429

版权

微信小程序笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用vant组件时，如van-grid，更改其内部样式，以实现透明背景。作者通过查看官方文档，分析组件源码，提供了修改WXML和WXSS的具体步骤，并指出仅限于page页面的使用，自定义组件需注意样式隔离问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 背景

在使用vant组件开发微信小程序的时候，想更改vant组件内部样式，达到自己想要的目的（van-grid组件改成宫格背景色为透明，默认为白色），官网没有示例，通过以下几步修改成功。

2 步骤

2.1 查看官方文档

Grid 外部样式类支持修改Grid组件样式，我们在组件上添加该属性即可，文件如下

类名	说明
custom-class	根节点样式类

2.2 wxml文件

      <van-grid column-num="4" custom-class="grid" border="{{false}}">
        <van-grid-item use-slot wx:for="{{ menuList }}">
          <navigator url="{{item.pagePath}}">
            <view class="cont-item">
              <image src="/image/page/{{item.imgSrc}}"></image>
              <text>{{ item.name }}</text>
            </view>
           </navigator>
        </van-grid-item>
      </van-grid>

2.3 wxss文件

这里我们通过查看组件源码知晓应该修改.van-grid-item__content样式类，代码如下：

.grid .van-grid-item__content {
  background-color: rgba(255, 255, 255, 0);
}

2.4 修改前后效果对比

修改前：

在这里插入图片描述

修改后：

在这里插入图片描述

注：本教程仅适用于page页面更改vant组件样式，若是自定义组件想修改vant组件样式，就需要更改组件样式隔离属性，大型项目不做推荐。