vue项目中使用vant轮播图组件(桌面端)

一. 内容简介

vue使用vant轮播图组件(桌面端)

二. 软件环境

2.1 Visual Studio Code 1.75.0

2.2 chrome浏览器

2.3 node v18.14.0

三.主要流程

3.1 安装环境

3.2 添加代码

3.3 结果展示

四.具体步骤

4.1 安装环境

先安装包

# Vue 3 项目,安装最新版 Vant
npm i vant

# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2

然后桌面端适配

npm i @vant/touch-emulator -S

4.2 添加代码

注册组件
相比于官方给的代码,有两个方面需要注意,一个是适配桌面端,还有一个就是我以为vant组件是和vue组件一样,导入一个就包含所有的结构了,其实vant组件import导入的时候并没有导入css样式,就会出现这样,就是样式不全。
在这里插入图片描述

<template>
  <div id="cc">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
// 为了适配桌面端
import "@vant/touch-emulator";
export default {
  data() {
    return {};
  },
  components: { [Swipe.name]: Swipe, [SwipeItem.name]: SwipeItem },
};
</script>

<style>
// 导入样式
@import "vant/lib/index.css";
#cc {
  width: 100%;
  clip: auto;
}
.van-swipe-item {
  width: 100%;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>

4.3 结果展示

在这里插入图片描述

五. 参考

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Unity中Shader立方体纹理Cubemap

文章目录 前言一、什么是立方体纹理二、立方体纹理的生成方式1、使用6个面的生成方式2、使用单张图片的生成方式 三、Cubemap的采样方式四、在Unity中看一下Cubemap五、在Shader中&#xff0c;对立方体纹理进行采样使用1、我们在属性面板定义一个Cube类型的变量来存放立方体纹理…

二分查找算法合集

二分查找也称折半查找&#xff08;Binary Search&#xff09;&#xff0c;它是一种效率较高的查找方法。但是&#xff0c;折半查找要求线性表必须采用顺序存储结构&#xff0c;而且表中元素按关键字有序排列。 时间复杂度 O(logn) 自己写二分算法 左闭右开 左开右闭C算法&a…

java智慧校园信息管理系统源码带微信小程序

一、智慧校园的定义 智慧校园指的是以云计算和物联网为基础的智慧化的校园工作、学习和生活一体化环境。以各种应用服务系统为载体&#xff0c;将教学、科研、管理和校园生活进行充分融合&#xff0c;让校园实现无处不在的网络学习、融合创新的网络科研、透明高效的校务治理、…

OpenGL 坐标投影与反投影(Qt)

文章目录 一、简介1.1投影1.2反投影二、应用代码三、实现效果参考资料一、简介 在学习OpenGL一段时间之后,我们都会了解坐标的转换过程,如下图所示: 1.1投影 正如图中所述,OpenGL将一个3D坐标投影到一个2D空间主要有以下几个步骤,这也是我们比较熟知的几个步骤: 现实局部…

asp.net学生成绩评估系统VS开发sqlserver数据库web结构c#编程计算机网页项目

一、源码特点 asp.net 学生成绩评估系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 系统运行视频连接&#xff1a;https://www.bilibili.com/video/BV1Wz4y1A7CG/ 二、功能介绍 本系统使用Microsof…

读像火箭科学家一样思考笔记02_与不确定性共舞(下)

1. 万有理论 1.1. 相对论 1.1.1. 适用于体积非常大的物体 1.2. 量子力学 1.2.1. 适用于非常小的物体 1.2.2. 在量子力学诞生之前&#xff0c;物理学一直强调的是因果关系&#xff0c;即做这件事&#xff0c;就会得到那个结果 1.2.3. 量子力学讲的似乎是&#xff1a;当我们…

Linux发展历程

<!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Linux历史发展</title> <style> /* CSS样式 */ body { font-family: Arial, sans-serif; margin: 0;…

【计算机网络笔记】IPv6简介

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

C++二分查找算法:查找和最小的 K 对数字

相关专题 二分查找相关题目 题目 给定两个以 非递减顺序排列 的整数数组 nums1 和 nums2 , 以及一个整数 k 。 定义一对值 (u,v)&#xff0c;其中第一个元素来自 nums1&#xff0c;第二个元素来自 nums2 。 请找到和最小的 k 个数对 (u1,v1), (u2,v2) … (uk,vk) 。 示例 1:…

Linux shell编程学习笔记27:tputs

除了stty命令&#xff0c;我们还可以使用tput命令来更改终端的参数和功能。 1 tput 命令的功能 tput 命令的主要功能有&#xff1a;移动更改光标、更改文本显示属性&#xff08;如颜色、下划线、粗体&#xff09;&#xff0c;清除屏幕特定区域等。 2 tput 命令格式 tput [选…

机器学习笔记 - Ocr识别中的文本检测EAST网络概述

一、文本检测 文本检测简单来说就是找到图像中可以出现文本的区域。例如,请参见下图,其中在检测到的文本周围绘制了绿色边框。 在进行文本检测时,你可能会遇到两种情况 具有结构化文本的图像:这是指具有干净/均匀背景和常规字体的图像。文本大多密集,行结构正确,…

【Linux】进程间通信 -- 管道

对于进程间通信的理解 首先&#xff0c;进程间通信的本质是&#xff0c;让不同的进程看到同一份资源&#xff08;这份资源不能隶属于任何一个进程&#xff0c;即应该是共享的&#xff09;。而进程间通信的目的是为了实现多进程之间的协同。 但由于进程运行具有独立性&#xff…

python——第十天

今日目标&#xff1a; 常见排序和查找 常见排序和查找: 冒泡排序 选择排序 插入排序 选择排序&#xff1a; 假设"第一个值"是最小值&#xff0c;就要每一轮找到真正的最小值&#xff0c;并且和假设的这个值交换 [1, 3, 2, 10, -8, 9, -30, 7] 1、 [-30, 3, 2, 10, -8…

代码随想录算法训练营第四十八天|121. 买卖股票的最佳时机 122.买卖股票的最佳时机II

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 121. 买卖股票的最佳时机 class Solution:def maxProfit(self, prices: List[int]) -> int:if len(prices) 0:return 0dp [[0] * 2 for _ in r…

数据结构与算法【堆】的Java实现

前言 之前已经说过堆的特点了&#xff0c;具体文章在数据结构与算法【队列】的Java实现-CSDN博客。因此直接实现堆的其他功能。 建堆 所谓建堆&#xff0c;就是将一个初始的堆变为大顶堆或是小顶堆。这里以大顶堆为例。展示如何建堆。 找到最后一个非叶子节点从后向前&…

【作业】操作系统实验一:进程和线程

文章目录 实验内容一、进程的创建1、编辑源程序2、编辑结果3、编译和运行程序4、解释运行结果 二、进程共享1、运行2、解释运行结果 三、进程终止1、运行2、解释运行结果 四、进程同步1、运行2、解释运行结果 五、Linux中子进程映像的重新装入1、运行2、解释运行结果 六、线程1…

三十一、W5100S/W5500+RP2040树莓派Pico<TCP_Server多路socket>

文章目录 1 前言2 简介2. 1 使用多路socket的优点2.2 多路socket数据交互原理2.3 多路socket应用场景 3 WIZnet以太网芯片4 多路socket设置示例概述以及使用4.1 流程图4.2 准备工作核心4.3 连接方式4.4 主要代码概述4.5 结果演示 5 注意事项6 相关链接 1 前言 W5100S/W5500是一…

SQL零基础入门教程,贼拉详细!贼拉简单! 速通数据库期末考!(七)

LEFT JOIN LEFT JOIN 同样用于关联两个表&#xff0c;ON 关键字后指定两个表共有的字段作为匹配条件&#xff0c;与 INNER JOIN 不同的地方在于匹配不上的数据行&#xff0c;INNER JOIN 对两表匹配不上的数据行不返回结果&#xff0c;而 LEFT JOIN 只对右表&#xff08;table2…

gRPC 四模式之 客户端流RPC模式

客户端流RPC模式 在客户端流 RPC 模式中&#xff0c;客户端会发送多个请求给服务器端&#xff0c;而不再是单个请求。服务器端则会发送一个响应给客户端。但是&#xff0c;服务器端不一定要等到从客户端接收到所有消息后才发送响应。基于这样的逻辑&#xff0c;我们可以在接收…

基于SSM+Vue的鲜花销售系统/网上花店系统

基于SSM的鲜花销售系统/网上花店系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringMyBatisSpringMVC工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 管理员界面 摘要 鲜花销售系统是一个基于SSM&#xff08;Spring …