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

JL杰理AC696N开发板PWM波形生成与控制(1):频率、占空比

引言PWM这玩意儿&#xff0c;做调光、调速、甚至模拟音频都离不开。JL杰理AC696N的定时器自带PWM输出功能&#xff0c;配置起来不算复杂&#xff0c;但真要调出稳定的波形&#xff0c;有几个坑是绕不开的。比如初始化的时候LED会闪一下、占空比设0反而输出一个高电平、想换个引…...

ComfyUI-Manager下载加速三阶段优化方案:从单线程到多线程的300%性能提升

ComfyUI-Manager下载加速三阶段优化方案&#xff1a;从单线程到多线程的300%性能提升 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and en…...

[资料整理]魔法师传奇 MagicMayhem

魔法师传奇 Magic&Mayhem魔法师传奇中文站网站魔法师传奇2023版介绍魔法师传奇中文站网站 网站地址&#xff1a;魔法师传奇中文站 http://zb.l4d.top:1983/magic 备用链接&#xff1a;http://zb.my.to:1983/magic 论坛地址&#xff1a;魔法师传奇中文论坛 http://zb.l4d.t…...

javaweb小区饮水机自动售水系统的设计和实现

目录同行可拿货,招校园代理 ,本人源头供货商功能需求分析核心业务功能技术实现要点安全与扩展性项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 功能需求分析 用户管理模块 用户注册与…...

Pixel Epic应用场景:律所用其快速生成法律合规风险分析报告(含引用标注)

Pixel Epic应用场景&#xff1a;律所用其快速生成法律合规风险分析报告&#xff08;含引用标注&#xff09; 1. 法律合规报告生成的新范式 在法律服务领域&#xff0c;合规风险分析报告是律所日常工作中的重要产出。传统方式下&#xff0c;律师需要花费大量时间查阅法规条文、…...

实战即用:通过快马ai快速构建配置完备的flask web api项目

最近在做一个前后端分离的小项目&#xff0c;需要快速搭建一个轻量级的Web API服务。之前每次新建项目都要手动配置Python环境、安装依赖&#xff0c;特别容易出错。这次尝试用InsCode(快马)平台来生成配置好的Flask项目&#xff0c;整个过程意外地顺畅。 环境配置一步到位 传统…...

免费在Windows 10上安装Android子系统的完整指南

免费在Windows 10上安装Android子系统的完整指南 【免费下载链接】WSA-Windows-10 This is a backport of Windows Subsystem for Android to Windows 10. 项目地址: https://gitcode.com/gh_mirrors/ws/WSA-Windows-10 想在Windows 10电脑上直接运行手机应用和游戏吗&…...

Xinference下载模型卡住不动?从0%到100%的完整排坑指南

写在前面最近在使用Xinference部署模型时&#xff0c;遇到了一个让人抓狂的问题&#xff1a;无论WebUI还是命令行&#xff0c;模型下载的进度始终卡在0%不动&#xff0c;多次重试后还是没变化。更诡异的是&#xff0c;服务日志显示一切正常&#xff0c;但是就是下载不了。经过一…...

AI赋能嵌入式:借助快马平台为单片机生成轻量级语音唤醒代码框架

AI赋能嵌入式&#xff1a;借助快马平台为单片机生成轻量级语音唤醒代码框架 最近在做一个智能家居的小项目&#xff0c;需要给STM32单片机加上语音唤醒功能。作为嵌入式开发者&#xff0c;最头疼的就是把AI模型移植到资源有限的单片机上。好在发现了InsCode(快马)平台&#xf…...

如何用Python技术永久备份你的QQ空间数字记忆?

如何用Python技术永久备份你的QQ空间数字记忆&#xff1f; 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在数字化时代&#xff0c;我们的社交记忆正在悄然消失。你是否曾试图找回多年…...