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

安装

shell 复制代码
npm install swipe

使用

ts 复制代码
import 'swiper/css';
import 'swiper/css/mousewheel';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Mousewheel } from 'swiper/modules';

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

html 复制代码
      <swiper
        direction="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

相关推荐
西柚与蓝莓1 分钟前
报错:{‘csrf_token‘: [‘The CSRF token is missing.‘]}
前端·flask
NoneCoder36 分钟前
JavaScript系列(38)-- WebRTC技术详解
开发语言·javascript·webrtc
python算法(魔法师版)44 分钟前
html,css,js的粒子效果
javascript·css·html
德迅云安全-小钱1 小时前
跨站脚本攻击(XSS)原理及防护方案
前端·网络·xss
ss2731 小时前
【2025小年源码免费送】
前端·后端
Amy_cx1 小时前
npm install安装缓慢或卡住不动
前端·npm·node.js
gyeolhada1 小时前
计算机组成原理(计算机系统3)--实验八:处理器结构拓展实验
java·前端·数据库·嵌入式硬件
小彭努力中1 小时前
16.在Vue3中使用Echarts实现词云图
前端·javascript·vue.js·echarts
flying robot1 小时前
React的响应式
前端·javascript·react.js
禁默1 小时前
深入探讨Web应用开发:从前端到后端的全栈实践
前端