vue3 实现多组商品横向滚动(多组商品轮播)
vue3 实现多组商品横向滚动(多组商品轮播)
·
实现功能: 点击按钮切换,每页5个商品,当最后商品不满一页时 切换剩余的商品,如果切换到第一个则禁用左边按钮,如果切换到最后一个禁用右边按钮
实现方式: 这里我们使用 vue-awesome-swiper 默认安装的最新版本 已经支持vue3和ts
- 安装
npm install swiper vue-awesome-swiper --save 或者 yarn add swiper vue-awesome-swiper
- 引入插件 这里我使用的是全局引入(main.js里面引入插件)
// 引入vue-awesome-swiper
import SwiperClass, { Pagination, Grid, Mousewheel } from 'swiper'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css'
import 'swiper/css/pagination'
// use swiper modules
SwiperClass.use([Pagination, Grid, Mousewheel])
- 组件里就可以使用这个插件了
<script setup lang="ts">
import { ref } from 'vue'
import SwiperClass from 'swiper'
// vertical swiper
let vSwiperRef: SwiperClass | null = null
const setVSwiperRef = (swiper: SwiperClass) => {
vSwiperRef = swiper
}
let vSwiperIndex = ref<number>(0)
const updateVSwiperIndex = () => {
vSwiperIndex.value = vSwiperRef?.activeIndex || 0
}
// 切换到上一页
const prevVSwiperSlide = () => vSwiperRef?.slidePrev()
// 切换到下一页
const nextVSwiperSlide = () => vSwiperRef?.slideNext()
</script>
<template>
<div class="box">
<div class="arrow">
<a
href="javascript:;"
@click="prevVSwiperSlide"
:class="{ disabled: vSwiperIndex === 0 }"
class="iconfont prev"
><</a
>
<a
href="javascript:;"
:class="{ disabled: vSwiperIndex === 5 }"
@click="nextVSwiperSlide"
class="iconfont next"
>></a
>
</div>
<swiper
:slides-per-view="5"
:slides-per-group="5"
:space-between="14"
wrapper-tag="div"
@swiper="setVSwiperRef"
@slide-change="updateVSwiperIndex"
>
<swiper-slide v-for="item in 10" :key="item">
{{ item }}
</swiper-slide>
</swiper>
</div>
</template>
<style lang="less" scoped>
.box {
width: 1240px;
margin: 0 auto;
}
.arrow {
display: flex;
justify-content: flex-end;
margin-bottom: 4px;
}
.iconfont {
width: 20px;
height: 20px;
background: #ccc;
color: #fff;
display: inline-block;
text-align: center;
margin-left: 5px;
background: @xtxColor;
&::before {
font-size: 12px;
position: relative;
top: -2px;
}
&.disabled {
background: #ccc;
cursor: not-allowed;
}
}
:deep(.swiper-slide) {
height: 280px;
background: yellowgreen;
text-align: center;
line-height: 280px;
}
</style>
更多推荐
已为社区贡献9条内容
所有评论(0)