【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

相关推荐
SoaringHeart9 分钟前
Flutter小技巧:IM音浪效果实现
前端·flutter
小old弟10 分钟前
亲测autojs自动化,关闭应用的三种方法
前端
AndyLaw10 分钟前
我用 ChatGPT 起手、脚本改造,给孩子做了一个绘本
前端·javascript·openai
放空欧巴11 分钟前
学习 elpis 有感 -- 初识 elpis-core (实现简易版 Egg.js)
前端
前端开发呀12 分钟前
震惊!开启浏览器翻译竟会导致react应用报错?
前端·react.js
Sun_light14 分钟前
从 0 到 1 实现低代码编辑器的基本功能
前端·react.js·typescript
WildBlue16 分钟前
从 0 到 1 上手 React 中的 mitt,前端小白也能秒懂!🤓
前端·react.js·前端框架
叫我詹躲躲20 分钟前
告别模板语法!Vue3用JSX写组件的7k字深度指南
javascript·vue.js
星河那美21 分钟前
使用vis-timeline 完成时间轴事件追踪表
前端·vue.js