【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 小时前
css word-spacing属性
前端·css
千叶寻-1 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年6 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天8 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_8 小时前
HTML5(前端基础)
前端·html·html5
Jagger_8 小时前
敏捷开发流程-精简版
前端·后端
FIN66689 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing9 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1279 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿9 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js