You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.5 KiB
93 lines
2.5 KiB
<!--swiper轮播--> |
|
<script setup lang="ts"> |
|
import { reactive, toRefs } from 'vue' |
|
// |
|
//import {Pagination, Navigation} from 'swiper/modules' |
|
import { Swiper, SwiperSlide } from 'swiper/vue' |
|
import type SwiperClass from 'swiper' |
|
import 'swiper/css' |
|
import 'swiper/css/pagination' |
|
import 'swiper/css/navigation' |
|
|
|
import { ItemObject } from '~/types/global' |
|
import { merchantRecommendApi } from '~/server/merchantApi' |
|
import { Keyboard, Navigation, Pagination } from 'swiper' |
|
|
|
const props = defineProps({ |
|
//列表数据 swiperImage |
|
swiperSlideList: { |
|
type: Array, |
|
default: [], |
|
}, |
|
swiperData: { |
|
type: Object, |
|
default: null, |
|
}, |
|
}) |
|
const { swiperSlideList, swiperData } = toRefs(props) |
|
|
|
let swiperRef: SwiperClass | null = null |
|
const setSwiperRef = (swiper: SwiperClass) => { |
|
swiperRef = swiper |
|
} |
|
|
|
//跳到指定位置 |
|
const slideTo = (index: number) => { |
|
swiperRef?.slideTo(index - 1, 0) |
|
} |
|
defineExpose({ slideTo }) |
|
</script> |
|
|
|
<template> |
|
<div class="swiper" :style="swiperData.boxPadding"> |
|
<swiper |
|
:space-between="swiperData.spaceBetween" |
|
:slides-per-view="swiperData.slidesPerView" |
|
:modules="swiperData.modules" |
|
@swiper="setSwiperRef" |
|
:navigation="{ |
|
nextEl: '.swiper-button-next', |
|
prevEl: '.swiper-button-prev', |
|
}" |
|
:pagination="{ clickable: true, el: '.swiper-pagination'}" |
|
class="swiper h-100% proList acea-row" |
|
> |
|
<swiper-slide v-for="(item, index) in swiperSlideList" :key="index" class="h-100%" :class="swiperData.slideWidth"> |
|
<slot |
|
:value="{ |
|
swiperItem: item, |
|
swiperIndex: index, |
|
}" |
|
></slot> |
|
</swiper-slide> |
|
</swiper> |
|
<div class="swiper-button-prev iconfont icon-zuo1 text-center" :style="swiperData.navigationBgColor+';'+ swiperData.navigationColor" slot="button-prev"></div> |
|
<div class="swiper-button-next iconfont icon-you1 text-center" :style="swiperData.navigationBgColor+';'+ swiperData.navigationColor" slot="button-prev"></div> |
|
<div class="swiper-pagination"></div> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.swiper-button-prev:after, |
|
.swiper-button-next:after { |
|
display: none !important; |
|
} |
|
.swiper-button-prev { |
|
text-align: center; |
|
width: 30px; |
|
height: 42px; |
|
//background: rgba(0, 0, 0, 0.3); |
|
border-radius: 0px 23px 23px 0px; |
|
// color: #fff; |
|
margin-left: -10px; |
|
} |
|
.swiper-button-next { |
|
text-align: center; |
|
width: 30px; |
|
height: 40px; |
|
// background: rgba(0, 0, 0, 0.3); |
|
border-radius: 23px 0 0 23px; |
|
// color: #fff; |
|
margin-right: -9px; |
|
} |
|
</style>
|
|
|