vue2 nuxt2 swiper5使用方法
版本：
"swiper": "^5.3.6","vue": "^2.7.10","vue-awesome-swiper": "^4.1.1","core-js": "^3.25.3","element-ui": "^2.15.10","sass": "^1.80.6","nuxt": "^2.15.8","swiper": "^5.3.6","vue": "^2.7.10","vue-awesome-swiper": "^4.1.1","vue-server-renderer": "^2.7.10","vue-template-compiler": "^2.7.10"
代码案例：
定义组件
HotSelection.vue
<template><div class="hot-selection"><div class="container"><h2 class="title">热门精选</h2><!-- Swiper --><swiperref="swiperRef":options="swiperOptions"@ready="onSwiperReady"@slideChange="onSlideChange"class="swiper-container"><!-- 卡片 --><swiper-slide v-for="(item, index) in cards" :key="index"><div class="card" @mouseover="onHoverCard(index)" @mouseleave="onLeaveCard(index)"><div class="card-header"><span class="product-name">{{ item.title }}</span><div class="bank-logo"><!-- <img :src="item.logo" alt="标志" /> --></div></div><div class="card-content"><p class="rate">{{ item.rate }}</p><p class="amount">{{ item.amount }}</p></div><div class="card-footer"><span class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</span></div></div></swiper-slide></swiper><!-- 左右滑动按钮 --><div class="swiper-button"><buttonclass="prev-button":class="{ disabled: isAtStart }"@click="slidePrev":disabled="isAtStart">←</button><buttonclass="next-button":class="{ disabled: isAtEnd }"@click="slideNext":disabled="isAtEnd">→</button></div></div></div>
</template><script>
import { Swiper as SwiperClass, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";export default {components: {Swiper: SwiperClass,SwiperSlide,},data() {return {// 卡片数据cards: [{title: "图片轮播组件0",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件1",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件2",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件3",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件4",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件5",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件6",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件7",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件8",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件9",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},{title: "图片轮播组件10",logo: "path_to_bank_logo.png",rate: "vue-awesome-swiper^4.1.1",amount: "swiper^5.3.6",tags: ["vue", "swiper"],},// 更多卡片数据...],swiperInstance: null, // 保存 Swiper 实例swiperOptions: {slidesPerView: 4.5, // 显示4.5个卡片，支持部分滑块显示spaceBetween: 20, // 卡片间距loop: false, // 不循环滑动},isAtStart: true, // 是否在最左边isAtEnd: false, // 是否在最右边};},methods: {// Swiper 准备好时的回调onSwiperReady(swiper) {this.swiperInstance = swiper; // 保存实例this.updateButtonState(); // 初始化状态},// 滑动时触发onSlideChange() {this.updateButtonState();},// 更新按钮状态updateButtonState() {if (this.swiperInstance) {const { isBeginning, isEnd } = this.swiperInstance;// 针对 slidesPerView: 4.5 的特殊逻辑const activeIndex = this.swiperInstance.activeIndex; // 当前激活索引const totalSlides = this.cards.length; // 总滑块数const slidesPerView = 4.5;this.isAtStart = isBeginning; // 是否滑到开头// 是否到达最后（剩余的滑块数量不足以显示一个完整视图）this.isAtEnd = activeIndex >= totalSlides - Math.ceil(slidesPerView);}},// 左滑slidePrev() {if (this.swiperInstance && !this.isAtStart) {this.swiperInstance.slidePrev();}},// 右滑slideNext() {if (this.swiperInstance && !this.isAtEnd) {this.swiperInstance.slideNext();}},// 鼠标悬停效果onHoverCard(index) {const cards = document.querySelectorAll(".card");if (cards[index]) {cards[index].classList.add("hover");}},onLeaveCard(index) {const cards = document.querySelectorAll(".card");if (cards[index]) {cards[index].classList.remove("hover");}},},
};
</script><style scoped>
/* 样式与前文相同 */
.hot-selection {width: 100%;background: linear-gradient(to bottom, #d9eefe, #ffffff);padding: 40px 0;
}
.container {max-width: 1200px;margin: 0 auto;
}
.title {font-size: 24px;color: #333;margin-bottom: 20px;
}
.card {background: white;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);padding: 15px;transition: all 0.3s ease-in-out;
}
.card.hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.card-header {display: flex;justify-content: space-between;align-items: center;
}
.product-name {font-size: 18px;font-weight: bold;color: #333;
}
.bank-logo img {height: 30px;
}
.card-content {margin-top: 10px;
}
.rate {font-size: 16px;color: #0066cc;
}
.amount {font-size: 16px;font-weight: bold;color: #333;
}
.card-footer {margin-top: 10px;
}
.tag {display: inline-block;background: #f1f1f1;border-radius: 20px;padding: 5px 10px;font-size: 12px;color: #666;margin-right: 5px;
}
.swiper-button {display: flex;justify-content: space-between;margin-top: 20px;
}
.prev-button,
.next-button {background: #0066cc;color: white;border: none;border-radius: 50%;width: 40px;height: 40px;font-size: 18px;cursor: pointer;
}
.prev-button.disabled,
.next-button.disabled {background: #ccc;cursor: not-allowed;
}
.prev-button:hover:not(.disabled),
.next-button:hover:not(.disabled) {background: #004c99;
}
</style>