当前位置: 首页 > news >正文

【Vue】vue3中使用swipe竖直方向上滚动

安装

npm install swipe

使用

import 'swiper/css';
import 'swiper/css/mousewheel';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Mousewheel } from 'swiper/modules';

containerHeight 是容器的高度,一定要设置竖直方向上滚动高度,不然会非常高!!

      <swiperdirection="vertical":modules="[Mousewheel]":mousewheel="{enabled: true,}":speed="1500":slides-per-view="1":style="{ height: containerHeight + 'px' }">

文档

https://swiperjs.com/vue
https://swiperjs.com/swiper-api#mousewheel-control

相关文章:

【Vue】vue3中使用swipe竖直方向上滚动

安装 npm install swipe使用 import swiper/css; import swiper/css/mousewheel; import { Swiper, SwiperSlide } from swiper/vue; import { Mousewheel } from swiper/modules;containerHeight 是容器的高度&#xff0c;一定要设置竖直方向上滚动高度&#xff0c;不然会非…...

搭建基于 ChatGPT 的问答系统

搭建基于 ChatGPT 的问答系统 &#x1f4e3;1.简介&#x1f4e3;2.模型&#xff0c;范式和 token&#x1f4e3;3.检查输入-分类&#x1f4e3;4.检查输入-监督&#x1f4e3;5.思维链推理&#x1f4e3;6.提示链&#x1f4e3;7.检查输入&#x1f4e3;8.评估&#xff08;端到端系统…...

C++运行时类型识别

目录 C运行时类型识别A.What&#xff08;什么是运行时类型识别RTTI&#xff09;B.Why&#xff08;为什么需要RTTI&#xff09;C.dynamic_cast运算符Why&#xff08;dynamic_cast运算符的作用&#xff09;How&#xff08;如何使用dynamic_cast运算符&#xff09; D.typeid运算符…...

在微信上怎么制作一个商城链接

在这个快节奏的时代&#xff0c;每一分每一秒都显得尤为珍贵。随着移动互联网的飞速发展&#xff0c;我们的生活方式正经历着前所未有的变革&#xff0c;其中&#xff0c;微信作为国民级社交应用&#xff0c;早已超越了简单的聊天功能&#xff0c;成为了集社交、支付、生活服务…...

怎么搭建微信商城

在当今这个数字化时代&#xff0c;微信已成为人们日常生活中不可或缺的一部分&#xff0c;它不仅改变了我们的社交方式&#xff0c;更引领了商业营销的新潮流。微信商城作为微信生态内的一个重要组成部分&#xff0c;正以其独特的优势助力商家们实现线上销售的突破。本文将带您…...

【每日一练】python的类.对象.成员.行为.方法传参综合实例(保姆式教学)

运行结果: 本节课程内容&#xff1a;类的使用 1.掌握类的定义和使用方法 2.掌握类的成员的方法使用 3.掌握self关键字的作用 4.定义在类里的函数是类的一种行为&#xff0c;叫方法 5.带传参的行为使用方法 类基本分两部分组成&#xff1a;1.属性,2.方法 类的使用语法&#xf…...

Windows 如何打开表情符号面板并使用?

打开面板的方法 想要打开表情符号面板其实非常简单&#xff0c;只需要使用快捷键“Win.”或者“Win&#xff1b;”即可。按下快捷键之后就可以调用出表情符号键盘。 在面板中我们可以看见顶部的三个选项&#xff0c;分别是表情符号、颜文字和符号&#xff0c;表情符号就是上面…...

编程语言里的双斜杠:深入解析其神秘面纱

编程语言里的双斜杠&#xff1a;深入解析其神秘面纱 在编程语言的广阔天地中&#xff0c;双斜杠&#xff08;//&#xff09;这一看似简单的符号&#xff0c;实则蕴含着丰富的内涵和用途。它既是注释的标识&#xff0c;又是特定语法结构的组成部分&#xff0c;甚至在某些情况下…...

【架构-20】死锁

什么是死锁&#xff1f; 死锁(Deadlock)是指两个或多个线程/进程在执行过程中,由于资源的互相占用和等待,而陷入一种互相等待的僵局,无法继续往下执行的情况。 产生死锁的四个必要条件: &#xff08;1&#xff09;互斥条件(Mutual Exclusion)&#xff1a;至少有一个资源是非共享…...

Chat2DB:AI引领下的全链路数据库管理新纪元

一、引言 随着数据驱动决策成为现代企业和组织的核心竞争力&#xff0c;数据库管理工具的重要性日益凸显。然而&#xff0c;传统的数据库管理工具往往存在操作复杂、功能单一、不支持多类型数据库管理等问题&#xff0c;限制了数据的有效利用。为了打破这一局面&#xff0c;Ch…...

数据库的学习(5)

题目&#xff1a; 1、新增员工表emp和部门表dept create table dept (deptl int,dept name varchar(11)) charsetutf8; create table emp (sid int,name varchar(11),age int,worktime start date,incoming int,dept2 int) charsetutf8; insert into dept values (101,财务), (…...

v-bind指令——03

v-bind 指令详解&#xff1a; 1 、这个指令是干嘛的&#xff1f; 可以让html标签的某个属性的值产生动态的效果 2、v-bind指令的语法格式&#xff1a;<HTML 标签 v-bind : 参数 “表达式”> </HTML> 3、v-bind指令的编译原理&#xff1a; 编译前&#xff1a…...

RedisTemplate使用

文章目录 RedisTemplate使用String类型Hash类型List类型Set类型Zset类型 RedisTemplate使用 String类型 Overridepublic void testString() {// t11();String key "k1";String currentNum;// 用法1&#xff1a;key是否存在Boolean value client.hasKey(key);log.i…...

文献解读-多组学-第十八期|《整合 WES 和 RNA-Seq 数据以进行短变异发现》

关键词&#xff1a;多组学&#xff1b;基因测序&#xff1b;变异检测&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;Integrating WES and RNA-Seq Data For Short Variant Discovery标题&#xff08;中文&#xff09;&#xff1a;整合 WES 和 RNA-Seq 数…...

科学技术奖 | 畜禽粪污源头减排关键技术推广与种养循环一体化农业实践

...

【漏洞复现】锐捷校园网自助服务系统 任意文件读取

声明&#xff1a;本文档或演示材料仅用于教育和教学目的。如果任何个人或组织利用本文档中的信息进行非法活动&#xff0c;将与本文档的作者或发布者无关。 一、漏洞描述 锐捷校园网自助服务系统是用于学校网络管理的一个平台&#xff0c;login_judge.jsf接口存在任意文件读取…...

Centos9安装部署及静态ip配置方案

一、获取centos9的iso镜像 去官网 点击download 官网 点击x86&#xff0c;下载centos9 二、创建虚拟机 1、点击新建虚拟机 2、选择自定义 下一步 3、点击下一步 4、选择稍后安装操作系统 点击下一步 5、选择linux 选择要安装的centos 版本 这里选择centos7 6、设置虚拟…...

利用Altair One 云平台,轻松实现全球企业产品研发创新与优化

在过去的几十年里&#xff0c;工程师和数据科学家引入了大量改变世界的技术&#xff0c;但他们的工作方式却出人意料地停滞不前。技术的革新也带来了效率的不断提升。 面对众多企业的同样难题&#xff0c;Altair整合产品&#xff0c;创造出了用于协作工程、数据工程和分析应用程…...

数据库树状查询

SQL Server 树状查询 -- 创建临时表或者使用CTE WITH OrganizationTree AS (-- 定义递归的终止条件SELECT id, parent_id, name, 1 AS LevelFROM org_structureWHERE parent_id IS NULLUNION ALL-- 定义递归部分&#xff0c;这里的Level是为了记录树的层级SELECT o.id, o.pare…...

【实战场景】@Transactional中使用for update的注意点

【实战场景】Transactional中使用for update的注意点 开篇词&#xff1a;干货篇&#xff1a;知识回顾注意点1.锁的范围和粒度&#xff1a;2.事务的隔离级别&#xff1a;3.死锁&#xff1a;4.性能影响&#xff1a;5.事务的边界&#xff1a;6.异常处理&#xff1a;7. 数据库和存储…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...