位置: IT常识 - 正文
swiper获取当前数组滑动的inex(vue)(swiper.js常用功能)
编辑：rootadmin推荐整理分享swiper获取当前数组滑动的inex(vue)(swiper.js常用功能)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:swiper跳转指定swiper,swiper.slideto,swiper-list,swiper.update,swiper获取当前index,swiper-list,swiper-list,swiper获取当前index,内容如对您有帮助，希望把文章链接给更多的朋友！
最近有一个需求,上方是一个swiper,下方是商品数组,当滑动上方的swiper下方的列表需要跟着一起变化,这时候就需要获取当前滑动的swiper数组的index,再进行相关操作,实现方式如下:
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
import "swiper/dist/js/swiper.min";
export default {
data() {
return {
merchantsZoneList: [],
zoneId: "",
currentSlide: 0,
};
},
created() {
//调用获取swiper list
this.getMoaZone();
},
methods: {
dataCarousel(data) {
//此处需要改变一下this指向,因为此处的this是指向swiper
let that = this;
//初始化一个swiper
this.mySwiper = new Swiper(".swiper-container", {
//配置项
loop: true,
effect: "coverflow",
spaceBetween: 20,
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
initialSlide: 0,
observer: true,
observerParents: true,
autoplay: 100,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
coverflowEffect: {
rotate: 0,
slideShadows: false,
},
on: {
//滑动swiper使用的方法
transitionEnd: function() {
//当需要滑动的swiper选项等于当前的swiper选项,就不能调用方法
if (this.activeIndex == that.currentSlide) {
console.log("不能调用方法");
} else {
//只有相等才调用方法
that.currentSlide = this.activeIndex;
//获取当前swiper数组的index,data是从后台获取并传入的数组
const index = (this.activeIndex + data.length) % data.length;
//调用获取list方法数组
that.zoneId = data[index].id;
that.productList = [];
that.pageNum = 0;
that.getProductList();
}
},
},
});
},
async getZoneList() {
//从获取swiper数组
let res = await zoneList({});
//获取swiper list赋值
this.merchantsZoneList = res.data.ptZoneList;
//使用异步方法调用swiper初始化并传入
setTimeout(() => {
this.dataCarousel(res.data.ptZoneList);
}, 10);
},
},
};
上一篇：CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容
下一篇：vue项目设置打包后的静态文件访问路径(vue项目打包后还能修改吗)
](https://www.jiuchutong.com/image/20231126/1700987787.jpg)