微信小程序:vant-weapp 组件库、css 变量

vant-weapp 组件库

前往 vant-weapp 官网

npm 使用限制:不支持依赖于 Node.js 内置库浏览器内置对象C++ 插件 的包。

  1. 安装 vant-weapp

    # 通过 npm 安装
    npm i @vant/weapp -S --production# 通过 yarn 安装
    yarn add @vant/weapp --production# 安装 0.x 版本
    npm i vant-weapp -S --production
    
  2. 构建 npm

    先初始化 npm 环境,再构建 npm,构建成功后,会生成 miniprogram_npm 目录。

    npm init --y
    

在这里插入图片描述

  1. 修改 app.json

    将 app.json 中的 "style": "v2" 去除,并全局注册

    {// 全局注册组件"usingComponents": {"van-button": "@vant/weapp/button/index"}
    }
    

CSS 变量

vant-app 默认的css样式:查看详情

  • 普通css定义变量

    :root 中定义变量,通过 var(变量名, 新值) 使用变量。

    /* 定义变量 */
    :root {--main-color: red
    }/* 使用变量 */
    .one {color: var(--main-color)
    }/* 传变量就使用传递的值 */
    .two {color: var(--main-color, blue)
    }
    
  • 小程序 css 定义变量

    app.wxss 中定义全局变量。

    变量名写在 Page {} 中,通过 --变量名: 值 的形式定义。

    Page {--button-default-background-color: #808080;--button-default-color: #fff;
    }
    

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

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

相关文章

Mac环境报错 error: symbol(s) not found for architecture x86_64

Mac 环境Qt Creator报错 error: symbol(s) not found for architecture x86_64 错误信息 "symbol(s) not found for architecture x86_64" 通常是在编译或链接过程中出现的问题。这种错误提示通常涉及到符号未找到或者是因为编译器没有找到适当的库文件或函数定义。 …

powe bi界面认识及矩阵表基本操作 - 1

powe bi界面认识及矩阵表操作 1. 界面认识1.1 选择数据源1.2 选择相关表及点击加载1.3 表字段显示位置1.4 表属性按钮位置1.5 界面布局按钮认识 2. 矩阵表基本操作2.1 选择矩阵表2.2 创建矩阵表2.3 设置字体大小2.4 行填充:修改高度2.5 列宽:设置列的宽度…

【Python实战因果推断】55_因果推理概论5

目录 Consistency and Stable Unit Treatment Values Violations Causal Quantities of Interest Consistency and Stable Unit Treatment Values 在上述方程中,隐含着两个基本假设。第一个假设意味着潜在结果与处理是一致的:当时,。换句…

Vue3相比于Vue2进行了哪些更新

1、响应式原理 vue2 vue2中采用 defineProperty 来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加getter和setter,结合发布订阅模式实现响应式。 存在的问题: 检测不到对象属性的添加和删除数组API方法无法监听到需要对…

Shader笔记1:基础概念

有相当一部分来自shader圣经 Base of CG Concepts Tangent, Normal and Binormal N:法线(Normal, N)垂直于表面 T:切线(Tangent, T)与U方向同向 B:副切线(BiTangent, B&#xff09…

ADS 使用教程(十六)Using Sliders for Data Processing

上一篇:ADS 使用教程(十五)Multi-Dimensional Data Processing in ADS 在这一节,我们来谈论一下如何在进行多维数据处理时使用滑块(Sliders)来进行数据处理和分析。通过该方法,我们可以通过拖动…

python-docx 如何将列表中的值提取到段落中的run以及保存为多个文档?

🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收…

Clion开发STM32——移植FreeModbus

STM32型号 :STM32H743VIT6 FreeModbus版本 :1.6 使用工具:stm32cubeMX,Clion 使用STM32作从机,模式:RTU 网上用keil的比较多,用Clion的比较少,如果你也用Clion,那么希望…

【LLM】-07-提示工程-聊天机器人

目录 1、给定身份 1.1、基础代码 1.2、聊天机器人 2、构建上下文 3、订餐机器人 3.1、窗口可视化 3.2、构建机器人 3.3、创建JSON摘要 利用会话形式,与具有个性化特性(或专门为特定任务或行为设计)的聊天机器人进行深度对话。 在 Ch…

鸿蒙仓颉语言【cryptocj 库】(介绍与SHA、MD5、HMAC摘要算法)

cryptocj 库 介绍 cryptocj 是一个安全的密码库,包括常用的密码算法、常用的密钥生成和签名验证。 该库是对 C 语言的 openSSL 封装的仓颉加密算法 1 提供SHA、MD5、HMAC摘要算法。 前置条件:NA 场景: OHOS, Linux&#xff…

经纬恒润与奇瑞汽车签订新能源项目重点供应商合作协议,共同开启合作新篇章

近日,2024年国家级芜湖经开区汽车零部件生态大会成功举行,经纬恒润受邀出席,与行业各伙伴齐聚经开区,同绘发展蓝图,助力经开区汽车产业高质量发展。会上,经纬恒润与奇瑞汽车签署合作协议,成为奇…

Superset二次开发之筛选器native Filters 水平布局

引言 Apache Superset作为一个功能强大的开源数据探索和可视化平台,提供了丰富的配置选项来定制化用户体验。其中,HORIZONTAL_FILTER_BAR 是一个重要的配置项,专注于优化和改进Superset中的筛选器条布局与交互。 什么是HORIZONTAL_FILTER_B…

免费【2024】springboot stone音乐播放器的设计与实现

博主介绍:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围:SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

【数据库】数据库设计规范文件(Word)

方便业务功能实现、业务功能扩展;方便设计开发、增强系统的稳定性和可维护性;保证数据完整性和准确性;提高数据存储效率,在满足业务需求的前提下,使时间开销和空间开销达到优化平衡。资料获取:本文本个人名…

江科大/江协科技 STM32学习笔记P9-11

文章目录 OLED1、OLED硬件main.c EXTI外部中断1、中断系统2、中断执行流程图3、STM32中断4、中断地址的作用5、EXTI6、EXTI基本结构7、AFIO复用IO口8、EXTI框图或门和与门 9、旋转编码器介绍10、硬件电路 OLED 1、OLED硬件 SCL和SDA是I2C的通信引脚,需要接在单片机…

机器学习的运作原理和算法分类,让机器学习更加通俗易懂

👨‍💻个人主页:开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…

微信扫码登陆验证在Go系统开发时的应用与实践

微信扫码登录实现 登录流程 总体来说,就是三步: 点击微信登录,跳转到微信页面微信扫码登录,确认登陆微信跳转回来 这里,我们就得,明确两个问题: 跳到微信界面,跳过去的 URL 是什…

异常处理和swagger使用

全局异常处理类 定义全局异常处理类,会将错误全部提交到这个异常处理类中进行处理,这个类会将处理的统一结果响应给前端,如果不添加异常处理类,异常不会按照统一的响应格式进行,前端无法识别,当然也可以在…

vue-快速入门

Vue 前端体系、前后端分离 1、概述 1.1、简介 Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,可以高效地开发用户界面。…

浏览器的最大并发数(http1.1)

HTTP/1.1:每个资源请求通常需要单独的TCP连接,尽管支持Keep-Alive机制,允许在同一个TCP连接上连续发送多个请求。但通常浏览器限制并发TCP连接数(例如,每个域名最多6个并发连接)。 HTTP/2:引入…