微信小程序修改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.rhkb.cn/news/119683.html

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

相关文章

【USRP】调制解调系列7:GMSK、MSK、基于labview的实现

MSK 在数字调制中&#xff0c;最小频移键控&#xff08;Minimum-Shift Keying&#xff0c;缩写&#xff1a;MSK&#xff09;是一种连续相位的频移键控方式&#xff0c;在1950年代末和1960年代产生。与偏移四相相移键控&#xff08;OQPSK&#xff09;类似&#xff0c;MSK同样将…

记录一下自己对linux分区挂载的理解

一直狠模糊&#xff0c;分两个区&#xff0c;一个挂载/, 一个挂载/home 两者是什么关系 实测 先看挂载的内容 然后umount /home后创建一个新文件 再挂载回去 发现旧分区又回来了&#xff0c;说明路径只是个抽象的概念&#xff0c;分区挂载&#xff0c;互相之间数据是不影响…

基于 Zookeeper 实现服务注册和服务发现

文章目录 前言声明前置知识服务注册和发现Zookeeper 工作原理实现过程注册中心服务注册服务发现 总结 前言 无论是采用SOA还是微服务架构&#xff0c;都需要使用服务注册和服务发现组件。我刚开始接触 Dubbo 时一直对服务注册/发现以及 Zookeeper 的作用感到困惑&#xff0c;现…

【Elsevier旗下】中科院1区TOP,影响因子9分+,23天录用!极速见刊!

极速见刊推荐 中科院 1区&#xff08;TOP&#xff09; 出版社&#xff1a;Elsevier 影响因子&#xff1a;IF&#xff08;2022&#xff09;9.0-10.0 期刊分区&#xff1a;JCR1区&#xff0c;中科院1区&#xff08;TOP&#xff09; 检索情况&#xff1a;SCIE 在检&#xff…

微服务之架构演变

随着互联网的发展&#xff0c;网站应用规模不断扩大&#xff0c;网站架构随之不断演变&#xff0c;演变历史大致分为单体应用架构-垂直应用架构-分布式架构-SOA架构-微服务架构-云原生架构 架构演变 单体应用架构 以前网站流量小&#xff0c;只需要一个应用就可以把所有功能…

模拟实现list

目录 list的实现结构节点的实现迭代器的实现第一个模板参数T第二个模板参数Ref第三个模板参数Ptr 实现list中的接口函数插入和删除赋值重载和拷贝构造析构函数 总结 list的实现结构 STL库中的list的结构是双向循环链表&#xff0c;所以我们这里也实现一个双向循环链表 我们这…

中介者模式

1、场景 假如没有总经理。下面三个部门&#xff1a;财务部、市场部、研发部。财务部要发工资&#xff0c;让大家核对公司需要跟市场部和研发部都通气&#xff1b;市场部要接个新项目&#xff0c;需要研发部处理技术、需要财务部出资金。市场部跟各个部门打交道。 虽然只有三个…

无涯教程-JavaScript - DVAR函数

描述 DVAR函数使用与指定条件相匹配的列表或数据库的列中的数字,根据样本估算总体的方差。 语法 DVAR (database, field, criteria)争论 Argument描述Required/Optionaldatabase 组成列表或数据库的单元格范围。 数据库是相关数据的列表,其中相关信息的行是记录,数据的列是…

大数据课程K17——Spark的协同过滤法

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解Spark的协同过滤概念; 一、协同过滤概念 1. 概念 协同过滤是一种借助众包智慧的途径。它利用大量已有的用户偏好来估计用户对其未接触过的物品的喜好程度。其内在思想是相似度的定义…

服务器放在香港好用吗?

​  相较于国内服务器&#xff0c;将网站托管在香港服务器上最直观的好处是备案层面上的。香港服务器上的网站无需备案&#xff0c;因此更无备案时限&#xff0c;购买之后即可使用。 带宽优势 香港服务器的带宽一般分为香港本地带宽和国际带宽、直连中国骨干网 CN2三种。香港…

【python】—— 函数详解

前言&#xff1a; 本期&#xff0c;我们将要讲解的是有关python中函数的相关知识&#xff01;&#xff01;&#xff01; 目录 &#xff08;一&#xff09;函数是什么 &#xff08;二&#xff09;语法格式 &#xff08;三&#xff09;函数参数 &#xff08;四&#xff09;函…

轻量、便捷、高效—经纬恒润AETP助力车载以太网测试

随着自动驾驶技术和智能座舱的不断发展&#xff0c;高宽带、高速率的数据通信对主干网提出了稳定、高效的传输要求&#xff0c;CAN(FD)、LIN已无法充分满足汽车的通信需求。车载以太网作为一种快速且扩展性好的网络技术&#xff0c;已经逐步成为了汽车主干网的首选。 此外&…

面试题汇总

文章目录 一. 腾讯二. 华为三. 快手1. Long 的长度和范围&#xff0c;为什么要减 1 (Java基础)2. 线程池配置无界队列了之后&#xff0c;拒绝策略怎么搞&#xff0c;什么时候用到无界队列 (JUC并发) 四. 美团五. 阿里六. 百度七. 字节八. 大疆1. 为什么创建进程开销比线程大? …

Python之作业(一)

Python之作业&#xff08;一&#xff09; 作业 打印九九乘法表 用户登录验证 用户依次输入用户名和密码&#xff0c;然后提交验证用户不存在、密码错误&#xff0c;都显示用户名或密码错误提示错误3次&#xff0c;则退出程序验证成功则显示登录信息 九九乘法表 代码分析 先…

win | wireshark | 在win上跑lua脚本 解析数据包

前提说明&#xff1a;之前是在linux 系统上配置的&#xff0c;然后现在 在配置lua 脚本 &#xff0c;然后 分析指定协议 的 数据包 其实流程也比较简单&#xff0c;但 逻辑需要缕清来 首先要把你 预先准备的 xxx.lua 文件放到wireshark 的安装文件中&#xff0c;&#xff08;我…

linux深入理解多进程间通信

1.进程间通信 1.1 进程间通信目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程资源共享&#xff1a;多个进程之间共享同样的资源。通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它&#xff08;它们&#xff09;发生了某种事件…

《Linux从练气到飞升》No.20 Linux进程替换

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…

不同写法的性能差异

“ 达到相同目的,可以有多种写法,每种写法有性能、可读性方面的区别,本文旨在探讨不同写法之间的性能差异 len(str) vs str "" 本部分参考自: [问个 Go 问题&#xff0c;字符串 len 0 和 字符串 "" &#xff0c;有啥区别&#xff1f;](https://segmentf…

WebSocket--技术文档--基本概念--《快速了解WebSocket协议》

阿丹&#xff1a; 不断学习新技术&#xff0c;丰富自己了解更多才能扩展更多世界可能。 官网 WebSocket首页、文档和下载 - HTML5开发相关 - OSCHINA - 中文开源技术交流社区 软件简介 WebSocket 是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 WebS…

android:新建工程文件介绍

一、前言当我们新建一个app时会呈现出固定的工程文件&#xff0c;这篇文章介绍新建工程里的文件。 二、介绍 Structure:就是你选择哪个页面就会显示那个页面的结构&#xff0c;就比如说我选择的是MainActivity他就会显示这个页面所使用的方法。 1-2&#xff1a;是android自动生…