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>
相关推荐
Mintopia9 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
白日依山尽yy9 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
Mintopia10 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
陌小路15 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213823 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36531 分钟前
antd 组件部分API使用方法
前端
BillKu34 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞1 小时前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作