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

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组件样式,就需要更改组件样式隔离属性,大型项目不做推荐。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/66722.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

随机森林算法

介绍 随机森林是一种基于集成学习的有监督机器学习算法。随机森林是包含多个决策树的分类器&#xff0c;一般输出的类别是由决策树的众数决定。随机森林也可以用于常见的回归拟合。随机森林主要是运用了两种思想。具体如下所示。 Breimans的Bootstrap aggregatingHo的random …

重装系统全流程

重点&#xff1a; 下载镜像网址&#xff1a;下载 Windows 10 (microsoft.com) 不过不用下载&#xff0c;你的美均相U盘里面有下载好的Win10系统 重点注意&#xff0c;重启后拔优盘&#xff0c;安装时不要联网

PID串行多闭环控制与并行多闭环控制的优缺点分析和应用比较

导言&#xff1a; 在自动控制领域&#xff0c;PID控制器是一种经典的控制策略&#xff0c;被广泛应用于各种工业和非工业过程。随着控制系统的复杂性增加&#xff0c;PID串行多闭环控制和PID并行多闭环控制成为解决复杂控制问题的重要方法。本文将从优点和缺点的角度对这两种控…

Web服务器简介及HTTP协议

一、Web Server&#xff08;网页服务器&#xff09; 一个 Web Server 就是一个服务器软件&#xff08;程序&#xff09;&#xff0c;或者是运行这个服务器软件的硬件&#xff08;计算机&#xff09;。其主要功能是通过 HTTP 协议与客户端&#xff08;通常是浏览器&#xff08…

浏览器输入 URL 地址,访问主页的过程

分析&回答 浏览器解析域名&#xff1b;TCP建立连接&#xff1b;浏览器向服务器发送HTTP请求&#xff1b;服务器解析请求并返回HTTP报文&#xff1b;浏览器解析并渲染页面&#xff1b;断开连接。 反思&扩展 域名解析的流程 查找浏览器缓存——我们日常浏览网站时&am…

(二十)大数据实战——Flume数据采集的基本案例实战

前言 本节内容我们主要介绍几个Flume数据采集的基本案例&#xff0c;包括监控端口数据、实时监控单个追加文件、实时监控目录下多个新文件、实时监控目录下的多个追加文件等案例。完成flume数据监控的基本使用。 正文 监控端口数据 ①需求说明 - 使用 Flume 监听一个端口&am…

设计模式系列-创建者模式

一、上篇回顾 上篇我们主要讲述了抽象工厂模式和工厂模式。并且分析了该模式的应用场景和一些优缺点&#xff0c;并且给出了一些实现的思路和方案,我们现在来回顾一下&#xff1a; 抽象工厂模式&#xff1a;一个工厂负责所有类型对象的创建&#xff0c;支持无缝的新增新的类型对…

kotlin 转 Java

今天突然想研究下有些kotlin文件转为Java到底长什么样&#xff0c;好方便优化kotlin代码&#xff0c;搞了半天发现一个非常简单的Android Studio或者Intellij idea官方插件Kotlin&#xff0c;Kotlin是插件的名字&#xff0c;真是醉了&#xff1b; 这里以AS为例&#xff0c;使用…

pnpm快速创建 Vue.js 项目(npm类似)

目录 pnpm 创建一个 Vue.js 项目 前提准备&#xff1a; 运行创建命令&#xff1a; 选择项目配置&#xff1a;&#xff08;按需选择&#xff09; cd 项目名&#xff1a;&#xff08;进入项目终端&#xff09; 安装项目依赖&#xff1a; 运行项目&#xff1a; pnpm 创建一…

[FFmpeg] 常用ffmpeg命令

去水印 ffmpeg -i water.jpeg -strict -2 -vf delogox300:y250:w56:h18:show0 no_water.jpeg 打时间戳 ffmpeg -i perf_60Hz_Raw.mp4 -vf "drawtextfontsize160:fontcolorred:text%{pts\:hms}" -c:v libx264 -an -f mp4 perf_output.mp4 -y ffmpeg -i perf_8k.mp4 -v…

枚举的简单介绍

目录 概念&#xff1a; 枚举的声明&#xff1a; 枚举的使用&#xff1a; 枚举的取值&#xff1a; 枚举的优点&#xff1a; #define的功能&#xff1a; 而与#define对比&#xff0c;枚举的优点有&#xff1a; 概念&#xff1a; 枚举顾名思义就是⼀⼀列举。 把可能的取值…

无涯教程-JavaScript - VARP函数

VARP函数取代了Excel 2010中的VAR.P函数。 描述 该函数根据整个总体计算方差。 语法 VARP (number1,[number2],...)争论 Argument描述Required/OptionalNumber1The first number argument corresponding to a population.RequiredNumber2...Number arguments 2 to 255 cor…

音视频添 加水印

一、文字水印 在视频中增加文字水印需要准备的条件比较多&#xff0c;需要有文字字库处理的相关文件&#xff0c;在编译FFmpeg时需要支持FreeType、FontConfig、iconv&#xff0c;系统中需要有相关的字库&#xff0c;在FFmpeg中增加纯字母水印可以使用drawtext滤镜进行支持&am…

以GitFlow分支模型为基准的Git版本分支管理流程

以GitFlow分支模型为基准的Git版本分支管理流程 文章目录 以GitFlow分支模型为基准的Git版本分支管理流程GitFlow分支模型中的主要概念GitFlow的分支管理流程图版本号说明借助插件Git Flow Integration Plus实现分支模型管理其他模型TBD模型阿里AoneFlow模型 GitFlow分支模型中…

R语言数据管理

1.将变量加入列表中 > mydata<-data.frame(x1c(2,3,4,5),x2c(2,5,7,9)) > mydatax1 x2 1 2 2 2 3 5 3 4 7 4 5 9 > sumx<-x1x2 Error: object x1 not found > sumx<-mydata$x1mydata$x2 > sumx [1] 4 8 11 14 > ls() [1] "mydata&…

小小一个设置程序高级感拉满

手动设置 结果如下 代码设置&#xff1a; procedure TForm1.Button1Click(Sender: TObject); begin TStyleManager.TrySetStyle(cbxVclStyles.Text); end;procedure TForm1.FormCreate(Sender: TObject); var StyleName:string; begin for StyleName in TStyleManager.StyleNa…

java线程状态

图形说明: Thread.State源码注释: public enum State {/*** 新生状态&#xff1a;线程对象创建&#xff0c;但是还未start()*/NEW,/*** 线程处于可运行状态&#xff0c;但是这个可运行状态并不代表线程一定在虚拟机中执行。* 需要等待从操作系统获取到资源(比如处理器时间片…

【Npm】的安装和使用教程

前端工具及插件库 专栏收录该内容 24 篇文章1 订阅 订阅专栏 npm 一、安装配置 二、初始化配置文件 package.json package.lock.json 二、下载模块 2.1、下载指令 2.2、清理缓存 2.3、模块信息 2.4、npm i 与 npm ci 区别 三、其他指令 第三方模块是别人写好的一些文件&#xf…

Spark-Core核心算子

文章目录 一、数据源获取1、从集合中获取2、从外部存储系统创建3、从其它RDD中创建4、分区规则—load数据时 二、转换算子(Transformation)1、Value类型1.1 map()_1.2 mapPartitions()1.3 mapPartitionsWithIndex(不常用)1.4 filterMap()_扁平化&#xff08;合并流&#xff09;…

Java面试之斐波那契数列(Fibonacci)及其应用:青蛙跳台阶问题

文章目录 一、斐波那契数列问题1.1 题目1.2 什么是斐波那契数列1.3 效率很低的解法&#xff1a;递归1.4 递归缺点分析 二、比较好的解决办法2.1 保存数列中间项2.2 从下往上计算 三、公式法四、青蛙跳台阶问题4.1 题目及分析4.2 代码实现 一、斐波那契数列问题 1.1 题目 写一…