【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 是容器的高度,一定要设置竖直方向上滚动高度,不然会非常高!!

      <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. 【Vue】vue3使用swipe方向滚动

    2024-07-12 07:02:07       20 阅读
  2. vueswiper使用

    2024-07-12 07:02:07       46 阅读
  3. uniapp使用mixins控制横屏

    2024-07-12 07:02:07       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 07:02:07       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 07:02:07       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 07:02:07       58 阅读
  4. Python语言-面向对象

    2024-07-12 07:02:07       69 阅读

热门阅读

  1. C语言从头学30——字符串

    2024-07-12 07:02:07       18 阅读
  2. Git使用简介及相关命令

    2024-07-12 07:02:07       26 阅读
  3. 基于深度学习的视频内容分析

    2024-07-12 07:02:07       27 阅读
  4. 阿里生态体系

    2024-07-12 07:02:07       27 阅读
  5. 物联网时代的等保测评:保障万物互联的安全

    2024-07-12 07:02:07       28 阅读
  6. Oracle数据库模式对象

    2024-07-12 07:02:07       24 阅读
  7. 气浮沉淀污水处理设备广泛应用

    2024-07-12 07:02:07       21 阅读
  8. copy 和 mutableCopy 有点乱

    2024-07-12 07:02:07       28 阅读
  9. Go 1.19 工具链升级:go命令与工具改进详解

    2024-07-12 07:02:07       31 阅读
  10. 暗黑魅力:Xcode全面拥抱应用暗黑模式开发指南

    2024-07-12 07:02:07       27 阅读