【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

相关推荐
(⊙o⊙)~哦1 小时前
JavaScript substring() 方法
前端
无心使然云中漫步1 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者1 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_2 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js
罗政2 小时前
[附源码]超简洁个人博客网站搭建+SpringBoot+Vue前后端分离
vue.js·spring boot·后端
麒麟而非淇淋3 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120533 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
阿树梢3 小时前
【Vue】VueRouter路由
前端·javascript·vue.js
随笔写4 小时前
vue使用关于speak-tss插件的详细介绍
前端·javascript·vue.js
史努比.4 小时前
redis群集三种模式:主从复制、哨兵、集群
前端·bootstrap·html