vue + vue-awesome-swiper 实现整屏滚动切换(分页切换)

最新推荐文章于 2024-07-25 17:40:48 发布

夏夏的码农

最新推荐文章于 2024-07-25 17:40:48 发布

阅读量1.9k

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_41761448/article/details/117994866

版权

本文介绍了如何在Vue项目中使用vue-awesome-swiper组件来创建整屏滚动切换的效果，包括在Vue中安装、在main.js全局引入以及在具体组件中应用的步骤。

摘要由CSDN通过智能技术生成

1.vue中安装vue-awesome-swiper

"vue-awesome-swiper": "^3.1.3",

2.main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper';


Vue.use(VueAwesomeSwiper)

3.需要滑动页面的.vue文件中引入如下代码块

<template>
    <div>
        <swiper id="swiperBox" :options="swiperOption" ref="mySwiper">
            <swiper-slide class="swiper-slide" v-for="(item, index) in list":key="index">
                <div class="page">
                  <h3>{
  {item}}</h3>
                </div>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {