当前位置: 首页 > 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. 数据库和存储…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...