Vue3+Swiper实现PC端横向滑动拖拽

doria小鱼2025-04-17 15:01

项目需求要页面可以横向拖动，原本项目里就使用了Swiper，所以决定利用Swiper实现。选择Swiper的Free模式 / 自由滑动模式，设置后发现Swiper拖动到两边有默认的拉出回弹效果，但是项目不希望有这个效果，查Swiper的文档里相关参数、搜索解决办法和找deepseek给的结果都不好使。这是deepseek给的答案和网上搜索的结果基本一样。

而自己尝试发现只需要将resistance参数设为true, resistanceRatio设为0就可以实现。于是决定将此记录一下，方便以后查找。

vue3 复制代码

// HorizontalComp
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { FreeMode, Mousewheel } from 'swiper/modules'

// 导入样式（核心 + 模块）
import 'swiper/css'
import 'swiper/css/free-mode'

const freeOptions = {
    enabled: true,
    sticky: false,
    momentum: false,
    momentumBounce: false,
    momentumBounceRatio: 0
}

const modules = [FreeMode, Mousewheel];

</script>

<template>
    <div class="swiper-container">
        <swiper
            :modules="modules"
            :slides-per-view="'auto'"
            :free-mode="freeOptions"
            :resistance="true"
            :resistanceRatio="0"
        >
            <swiper-slide>
                <div class="slide-item item-content">
                    <slot></slot>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<style scoped lang="scss">
.swiper-container {
    width: 100%;
    padding:0;
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
}
.swiper-container::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */
}

.swiper {
    overflow: visible; 
}

.swiper-slide {
    width: auto !important; 
}

.item-content {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    user-select: none;
    cursor: grab;
}
</style>

使用

vue 复制代码

<template>
    <HorizontalComp >
        <!-- 测试效果部分 -->
        <div class="content"> 四川的美食之都，美食以川菜为主，口味鲜香麻辣。都江堰老腊肉和白果炖鸡是招牌，还有葱葱卷、冰粉、兔头之类的特色小吃。</div>
    </HorizontalComp>
</template>

<style scoped lang="scss">
.content {
    font-size: 48px;
    white-space: nowrap;
}
</style>