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

项目需求要页面可以横向拖动,原本项目里就使用了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>
相关推荐
鱼樱前端15 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig1 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少1 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix1 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易1 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao2 小时前
网安-XSS-pikachu
前端·安全·网络安全