微信小程序: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.rhkb.cn/news/383537.html

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

相关文章

学术研讨 | 区块链与隐私计算领域专用硬件研讨会顺利召开

学术研讨 近日,国家区块链技术创新中心主办,长安链开源社区支持的“区块链与隐私计算领域专用硬件研讨会”顺利召开,会议围绕基于区块链与隐私计算的生成式AI上链、硬件加速、软硬协同等主题展开讨论,来自复旦大学、清华大学、北京…

钉钉 ai卡片 stream模式联调

sdk连接 新建卡片模板下载node.js sdkconfig.json 配置应用信息 启动项目npm i npm run build npm run start连接成功 获取卡片回调 注册卡片回调事件调用https://api.dingtalk.com/v1.0/card/instances 创建卡片实例,返回实例Id //参数结构 {"cardTempla…

【Hot100】LeetCode—279. 完全平方数

目录 题目1- 思路2- 实现⭐完全平方数——题解思路 3- ACM 实现 题目 原题连接:279. 完全平方数 1- 思路 思路 动规五部曲 2- 实现 ⭐完全平方数——题解思路 class Solution {public int numSquares(int n) {// 1. 定义 dpint[] dp new int[n1];//2. 递推公式…

pytest-fixture

资料来源:虫师2020的个人空间-虫师2020个人主页-哔哩哔哩视频 支持类似unittest风格的fixture,即setup和teardown class类中的方法分类 类方法可以直接调用,需要添加装饰器,修改类中的变量 实例方法,需要先实例化&…

达梦数据库系列—29. DTS迁移ORACLE到DM

目录 1.ORACLE源端信息 2.DM目的端信息 3.DTS 迁移评估 4.数据库迁移 4.1 Oracle 源端数据库准备 4.2 目的端达梦数据库准备 初始化参数设置 兼容性参数设置 表空间规划 用户规划 创建迁移用户和表空间 4.3迁移步骤 创建迁移 配置数据源 配置迁移对象及策略 开…

TCP客户端connect断线重连

文章目录 TCP客户端connect断线重连1、为什么要断线重连2、实现代码 TCP客户端connect断线重连 1、为什么要断线重连 客户端会面临服务器崩溃的情况,我们可以试着写一个客户端重连的代码,模拟并理解一些客户端行为,比如游戏客户端等. 考虑到…

【Git】merge合并分支

两个分支未修改同一个文件的同一处位置: Git自动合并 两个分支修改了同一个文件的同一处位置:产生冲突 例: 在master分支修改了main同时,feat分支也修改了相同的文件 合并的时候就会产生冲突 解决方法: Step1- 手工修改冲突文件,合并冲突内容…

go语言day15 goroutine

Golang-100-Days/Day16-20(Go语言基础进阶)/day17_Go语言并发Goroutine.md at master rubyhan1314/Golang-100-Days GitHub 第2讲-调度器的由来和分析_哔哩哔哩_bilibili 一个进程最多可以创建多少个线程?-CSDN博客 引入协程 go语言中内置了协程goroutine&#…

星环科技携手东华软件推出一表通报送联合解决方案

随着国家金融监督管理总局“一表通”试点工作的持续推进,星环科技携手东华软件推出了基于星环科技分布式分析型数据库ArgoDB和大数据基础平台TDH的一表通报送联合解决方案,并已在多地实施落地中得到充分验证。 星环科技与东华软件作为战略合作伙伴&…

论文阅读【检测】:Facebook ECCV2020 | DETR

文章目录 论文地址AbstractMotivation模型框架详细结构小结 论文地址 DETR Abstract 提出了一种将目标检测视为直接集预测问题的新方法。简化了检测pipeline,有效地消除了许多手工设计的组件的需求,例如非最大抑制过程或锚生成,这些组件明…

802.11无线网络权威指南(二):无线帧结构

802.11无线网络权威指南(二):无线帧结构 无线协议桢的三种类型无线网络帧结构完整帧格式control frameDuration/IDAddressSequence ControlQoS ControlHT Control 字段Frame Body 帧体FCS 校验域 帧细节管理帧控制帧RTS 帧CTS 帧ACK 帧格式PS…

ceph log内容解析

log内容构造 如osd的一条log 分别表示 时间戳 线程id 日志等级 子模块 内容实体 剖析源码实现 每条log都是由一个Entry构成 定义在src/log/entry.h中 Entry(short pr, short sub) :m_stamp(clock().now()), // 打印日志时的时间戳m_thread(pthread_self()), // 打印日志的线…

redis的持久化方式

目录 1. 什么是持久化? 2. redis实现持久化的方式 2.1 什么是RDB? 2.2 什么时候会触发RDB模式? 2.2.1 手动触发 2.2.2 自动触发 2.3 什么是Aof? 2.3.1 开启Aof 2.4 RBD和AOF的区别 1. 什么是持久化? 把内存中…

el-table列的显示与隐藏

需求:实现 表字段的显示与隐藏。效果图 代码实现 写在前面 首先 我部分字段有自定义的排序逻辑,和默认值或者 数据的计算 所以是不能简单的使用 v-for 循环column 。然后 我需要默认展示一部分字段,并且 当表无数据时 提示不能 显示隐藏 …

AIGC Kolors可图IP-Adapter-Plus风格参考模型使用案例

参考: https://huggingface.co/Kwai-Kolors/Kolors-IP-Adapter-Plus 代码环境安装: git clone https://github.com/Kwai-Kolors/Kolors cd Kolors conda create --name kolors python=3.8 conda activate kolors pip install -r requirements.txt python3 setup.py install…

mybatis一对多 多对多

一对一 方式一: ,在result的property属性用user.XXX 方式二:把user对象的属性用resultMap标签包含在association标签里,user的id做id标签,特点是返回值是对象的标识,而集合是collection 一对多 在user类加了个订单的集合,表示一个用户有多个订单 这接口当然是user的 分为re…

PWM信号转模拟信号转换器GP8101/GP8101M

前言: 各位大佬,听说过PAC吗?PAC (PWM to Analog Converter)。 今天介绍一个小众的转换芯片,PWM转模拟信号的,有一定的应用场景,单价一元多。这种芯片隔离PWM还是很容易的。 0%-100% PWM to 0-5V/0-10V SOP8封装的GP…

HarmonyOS三方库的使用

系统组件难以提供比较优秀的界面,需要第三方库来实现一些比较好看的界面效果 三方库的获取: 开源社区支持OpenHarmony-TPC 和 Openharmony三方库中心仓 先目前已经拥有各种各样的三方库,包括UI 图片 动画 网络 数据存储 工具类 多媒体 安全等…

redis数据类型介绍

Redis 支持多种数据类型,包括: 1.字符串(String):最简单的数据类型,可以存储字符串、数字等。 2.哈希(Hash):类似于 Map,可以存储键值对,其中键值…

Go语言编程 学习笔记整理 第2章 顺序编程 后半部分

1.流程控制 1.1 条件语句 if a < 5 { return 0 } else { return 1 } 注意&#xff1a;在有返回值的函数中&#xff0c;不允许将“最终的”return语句包含在if...else...结构中&#xff0c; 否则会编译失败&#xff01;&#xff01;&#xff01; func example(x int) i…