vue 使用vue-awesome-swiper实现原生滑动切换及点击动画切换TAB

本文介绍如何在Vue项目中引入并使用vue-awesome-swiper组件,实现轮播图功能。详细讲解了如何通过swiper的方法实现点击按钮跳转到指定轮播页面,以及如何在滑动到特定轮播页面时自动点亮对应按钮。

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

首先需要引入vue-awesome-swiper,代码如下:

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在main.js引入 css import '../../static/swiper/swiper.min.css'

这样咱们就可以使用swiper了,使用代码如下:

这是里面使用的配置:

要自己定义tab 首先要知道点击按钮之后主动跳转到某个banner页面怎么实现,使用swiper方法,使用swiper的全局方法,

这样就可以直接this.swiper 来调用seiper的原生方法了。

跳转到指定页面  this.swiper.slideTo(1, 400, false) 三个参数,第一个是跳转的下标,第二个是跳转的时间,第三个是回调函数,设置为false时不会触发onSlideChange回调函数。

这样就实现了点击某个按钮跳转到某个 banner 的效果了,剩下的就是,滑到某个banner自动点亮某个按钮,官网让用slideChangeEnd,但经测试,这个方法不太好使,我最后用的transitionEnd。

注意:vue中使用方法的时候一定要on:{},这种方式,顶上图里面有示例,原则上swiper官网上的方法都可以使用,但某个确实不可用,不是用的方式不对,就是不支持某个方法。

### 使用 `vue-awesome-swiper` 实现小图切换大图功能 为了实现Vue 项目中通过点击缩略图来切换展示的大图效果,可以利用 `vue-awesome-swiper` 提供的特性。下面是一个详细的实现方案。 #### 安装依赖库 对于 Vue2 的环境推荐安装特定版本以确保兼容性和稳定性: ```bash npm install swiper@5.0 vue-awesome-swiper -S ``` 注意不同版本之间的样式文件导入路径有所区别,在此案例中使用的是 Swiper 5 版本[^3]。 #### 导入必要的模块和样式 在项目的入口文件 `main.js` 中完成如下操作: ```javascript import Vue from 'vue' // 引入组件库及其对应的CSS资源 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/css/swiper.css' Vue.use(VueAwesomeSwiper) ``` #### 创建图片预览组件 创建一个新的 Vue 组件用于承载相册布局逻辑以及交互行为: ```html <template> <div class="gallery"> <!-- 大图区域 --> <swiper :options="swiperOptionTop" ref="bigImageSwiper"> <swiper-slide v-for="(slide, index) in slides" :key="index"> <img :src="slide.src"/> </swiper-slide> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-white"></div> <!-- Add Navigation Arrows --> <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> </swiper> <!-- 缩略图导航栏 --> <swiper :options="swiperOptionThumbs" ref="thumbsSwiper"> <swiper-slide v-for="(thumb, index) in thumbs" :key="index"> <img @click="changeBigImg(index)" :src="thumb.src"/> </swiper-slide> </swiper> </div> </template> <script> export default { data() { return { // 配置顶部大图轮播器选项 swiperOptionTop: { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, pagination: { el: '.swiper-pagination', type: 'fraction' } }, // 配置底部缩略图轮播器选项 swiperOptionThumbs: { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true }, // 图片数据源 slides: [ { src: '/path/to/image1.jpg' }, { src: '/path/to/image2.jpg' }, ... ], // 缩略图数据源 thumbs: [ { src: '/path/to/thumb1.jpg' }, { src: '/path/to/thumb2.jpg' }, ... ] }; }, methods: { changeBigImg(index){ this.$refs.bigImageSwiper.swiper.slideTo(index); } } } </script> ``` 上述代码片段展示了如何构建一个包含两个 Swiper 实例的应用场景——一个是用来显示全尺寸图像的主要滑动容器;另一个则是作为辅助工具条的小型缩略图列表。当用户点击某个缩略图触发相应的方法改变当前正在查看的大图索引位置[^1]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值