利用swiper 实现上拉下拉回弹效果

最新推荐文章于 2024-11-27 14:18:43 发布

转载最新推荐文章于 2024-11-27 14:18:43 发布 · 1.6k 阅读

vue 专栏收录该内容

7 篇文章

订阅专栏

博客介绍了利用Swiper实现上拉下拉回弹效果。Swiper是前端开发中常用工具，借助它可实现页面交互效果，提升用户体验，在前端页面开发中有重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <swiper :options="swiperOption" class="swiper">
            <swiper-slide class="text">
                <div>写入大量内容</div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
    export default {
        data() {
            return {
                swiperOption: {
                    direction:'vertical',
                    slidesPerView:'auto',
                    freeMode:true,
                    mousewheel:true,
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        },
    }
</script>

<style scoped>
    .swiper{
        height: 300px;
        overflow: hidden;
    }
    .text{
        font-size: 18px;
        text-align: left;
        padding: 30px;
        box-sizing: border-box;
        height: auto;
    }
</style>