微信小程序-Vant组件库的使用

news2024/11/14 2:33:03

一. 在app.json里面删除style:v2

为了避免使用Vant组件库和微信小程序组件样式的相互影响

二.在app.json里面usingComponents注册Vant组件库的自定义组件

  "usingComponents": {
    "van-icon": "./miniprogram_npm/vant-weapp/icon/index",
    "van-cell": "./miniprogram_npm/vant-weapp/cell/index",
    "van-cell-group": "./miniprogram_npm/vant-weapp/cell-group/index"
  }

可以查看Vant组件库的介绍进行参考
在这里插入图片描述

三.参考文档进行Vant组件库组件的使用

<van-cell value="内容" custom-class="custom-class">
  <view slot="title">
    <view class="van-cell-text">单元格</view>
  </view>
</van-cell>
<van-cell title="单元格" bind:click="msg">
  <van-icon slot="right-icon" name="search" class="custom-icon" />
</van-cell>

效果图:
在这里插入图片描述
分析:
1.单元格红色原因:
在这里插入图片描述
外部样式类设置为字体红色
custom-class=“custom-class”

.custom-class{
  color: red !important;
}

在这里插入图片描述
2.内容显示在右侧
value属性值都显示在右侧
在这里插入图片描述
2.插槽right-icon,显示一个自定义组件图标search

  <van-icon slot="right-icon" name="search" class="custom-icon" />

在这里插入图片描述

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

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

相关文章

Discourse 将主题打印成 PDF

Discourse 允许用户通过使用 打印主题&#xff08;Print topic&#xff09; 快捷键来生成 PDF 文件。这个快捷键针对操作系统的不同&#xff0c;可以通过键盘上的 ? 来进行查看。 大部分操作系统: ctrlpMacOS: ⌘p 使用快捷键后会打开一个新的浏览器窗口&#xff0c;在这个新…

【LeetCode每日一题】——653.两数之和 IV - 输入二叉搜索树

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 广度优先搜索 二【题目难度】 简单 三【题目编号】 653.两数之和 IV - 输入二叉搜索树 四【…

使用MAC电脑、iPhone 真机调试 H5页面

使用MAC电脑、iPhone 真机调试 H5页面 简介Safari 浏览器设置iPhone 手机设置开始调试 简介 为方便在 H5开发过程中在真实手机调试 H5页面&#xff0c;可进行一下设置 Safari 浏览器设置 在 Mac 电脑打开浏览器后&#xff0c;点左上角的" Safari 浏览器" -> “设…

Android OCR 谷歌OCR TextRecognition用法介绍

谷歌OCR TextRecognition用法介绍 文章目录 谷歌OCR TextRecognition用法介绍简介作用如何使用1 在project-build.gradle/setting.gradle添加maven仓库2.在module-build.gradle添加仓库依赖3.初始化4.使用InputImage5.进行识别 完整代码使用效果&#xff1a; 所有代码在Github-…

IEEE报告解读:存储技术发展趋势分析

1.引言 随着数据科学、物联网&#xff08;IoT&#xff09;和永久存储需求的快速增长&#xff0c;对大规模数据存储的需求正在迅速增加。存储技术的发展趋势直接关系到数据的可靠性和经济性。本文将根据IEEE最新发布的《2023年国际器件与系统路线图》&#xff0c;深入探讨各种存…

私网环境下如何使用云效流水线进行 CI/CD?

作者&#xff1a;怀虎 场景介绍 代码库、制品库等数据资产托管在内部办公网&#xff0c;公网不能访问&#xff0c;希望能够使用云效流水线进行 CICD 的编排和控制。 整体方案 云效流水线可以托管用户的私网环境内的机器&#xff0c;并将构建任务调度到这些机器上&#xff0…

PPT创作新纪元C-Ai PPT助手

前端必备工具推荐网站(免费图床、API和ChatAI等实用工具): http://luckycola.com.cn/ 解锁PPT创作新纪元 —— 遇见C-AiPPT助手 在这个快节奏的时代&#xff0c;无论是商务演示还是学术汇报&#xff0c;一份精美且内容丰富的PPT都是不可或缺的利器。但你是否曾为寻找合适的PPT…

81.SAP ME - SAP SMGW Getway Monitor

目录 1.起因 2.SMGW Displaying Logged On Clients Displaying Remote Gateways Display and Control Existing Connections Deleting a Connection Displaying Gateway Release Information Displaying Parameters and Attributes of the Gateway Change Gateway Pa…

QModbus例程分析

由于有一个Modebus上位机的需要&#xff0c;分析一下QModbus Slave的源代码&#xff0c;方便后面的开发。 什么是Modbus Modbus是一种常用的串行通信协议&#xff0c;被广泛应用于工业自动化领域。它最初由Modicon&#xff08;目前属于施耐德电气公司&#xff09;于1979年开发…

AXS4054:单节锂电池充电管理芯片特性与应用推荐

AXS4054是一款单节锂离子电池恒流/恒压线性充电器&#xff0c;芯片集成功率晶体管&#xff0c;充电电流可以用外部电阻设定&#xff0c;蕞大持续充电电流可达600mA,非常适合便携式设备应用&#xff0c;适合USB电源和适配器电源工作&#xff0c;内部采用防倒充电路&#xff0c;不…

关于暨南大学电子信息复试机试篇

书接上回&#xff0c;上一篇文章为关于暨南大学智科院电子信息复试笔试篇&#xff0c;由于我误信了卖复试辅导书的店家说今年改机试&#xff0c;所以在复试方案出来之前&#xff0c;我一直都在准备机试&#xff0c;暨南大学的机试历年来一直都是四道编程题&#xff0c;可以使用…

【C++】C++11中的包装器和绑定器

目录 一、function包装器 1.1 可调用对象 1.2 概念 1.3 应用场景 二、bind绑定器 一、function包装器 1.1 可调用对象 我们平时使用的普通函数、函数指针、仿函数和Lambda表达式都是可调用对象&#xff0c;它们不仅可以作为其他函数的参数传入&#xff0c;还可以作为其他…

逻辑回归模型构建+PDP(部分依赖图)解析——Python代码及运行结果分析

一、逻辑回归模型简介 逻辑回归是一种广泛用于二分类问题的统计模型。它通过使用逻辑函数将预测结果映射到0到1之间&#xff0c;从而可以用于概率预测。模型的训练过程通常包括以下几个步骤&#xff1a; 数据预处理&#xff1a;处理缺失值、编码分类变量、标准化数值变量。特…

Python代码之特征工程基础

1. 什么是特征工程 特征工程是指从原始数据中提取、转换和创建适合于模型训练的数据特征的过程。它是机器学习和深度学习中非常重要的一步&#xff0c;因为好的特征工程可以显著提高模型的性能。特征工程涉及从数据中提取有意义的信息&#xff0c;并将其转换为模型可以理解和使…

[CP_AUTOSAR]_通信服务_DCM模块(二)_通用设计元素

目录 1、通用设计元素1.1、子模块1.2、NRC&#xff08;Negative Response Code&#xff09;1.3、Non-volatile 信息1.4、Types1.4.1、Atomic types overview1.4.2、Data array types overview1.4.3、Nested Data types overview1.4.4、Data types constraints1.4.5、Dcm_OpStat…

第一周、、

7-1 入度与出度 分数 10 全屏浏览 切换布局 作者 黄龙军 单位 绍兴文理学院 求有向图G中各顶点的入度与出度。建议分别采用邻接矩阵和邻接表这两种不同的存储结构完成。 输入格式: 首先输入一个正整数T&#xff0c;表示测试数据的组数&#xff0c;然后是T组测试数据。每组…

2024年,这4款思维导图在线工具帮你高效作图

思维导图是一种强大的思维工具&#xff0c;它能够帮助我们更好地处理信息、解决问题。很多人都不知道要怎么制作&#xff0c;我整理的这4款工具是目前很受欢迎的思维导图工具&#xff0c;使用起来也很简单。 1、福昕导图软件 传送门&#xff1a;pdf365.cn/naotu 这是一款制作…

kubernetes 集群组件介绍

kubernetes 集群组件介绍 Kubernetes 架构 在Kubernetes&#xff08;k8s&#xff09;集群中&#xff0c;主节点&#xff08;Master Node&#xff09;和工作节点&#xff08;Worker Node&#xff09;都运行特定的软件组件&#xff0c;它们共同管理和运行容器化的应用程序。以下…

SD卡参数错误:深度解析与数之寻软件恢复实战

一、SD卡参数错误&#xff1a;数据与设备的隐形杀手 在数字化时代&#xff0c;SD卡作为便携存储设备&#xff0c;广泛应用于相机、手机、无人机及各类电子设备中&#xff0c;承载着人们珍贵的照片、视频、文档等重要数据。然而&#xff0c;SD卡在使用过程中&#xff0c;有时会…

天津有哪些SOLIDWORKS代理商?

随着数字化转型的步伐加快&#xff0c;越来越多的企业开始寻求高效的三维设计解决方案来提高生产力和创新力。在天津&#xff0c;亿达四方作为SOLIDWORKS官方授权的代理商&#xff0c;正成为众多企业的首选合作伙伴。本文将详细介绍亿达四方提供的服务和优势&#xff0c;帮助您…