Browse Source

fix: 修改轮播

pull/5/head
张耀 3 years ago
parent
commit
aaa21989d7
  1. 18
      public/static/offline/JSON/getAdvertisingList.json
  2. 15
      src/components/Carousel/Carousel.vue
  3. 2
      src/types/home.d.ts
  4. 2
      src/views/Activity/Activity.vue

18
public/static/offline/JSON/getAdvertisingList.json

@ -39,6 +39,24 @@
"endDate": "2023-07-03", "endDate": "2023-07-03",
"online": "2023-06-02", "online": "2023-06-02",
"offline": "2023-07-03" "offline": "2023-07-03"
},{
"id": 9,
"advertisingCode": "2D3D6jrsxdBACj053KCPiD",
"advertisingName": "333",
"advertisingNameEn": "31212",
"advertisingNameOl": "2555",
"advertisingNameJa": "2555",
"address": "33",
"addressEn": "32",
"addressOl": "22",
"addressJa": "22",
"fileCode": "QdTMItiCaAuebZdnW6zjr",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/AqUbanFt3SXwU2dT68uNy.jpg",
"ord": 1,
"startDate": "2023-06-01",
"endDate": "2023-07-03",
"online": "2023-06-02",
"offline": "2023-07-03"
} }
] ]
} }

15
src/components/Carousel/Carousel.vue

@ -1,27 +1,28 @@
<template> <template>
<!--
:observer="true"
-->
<swiper <swiper
v-if="acList.length" v-if="acList.length"
:modules="modules" :modules="modules"
:slides-per-view="1.12" :slides-per-view="1.12"
:observer="true"
:centered-slides="true" :centered-slides="true"
:initial-slide="acList.length !== 1 ? 1 : 0" :initial-slide="acList.length !== 1 ? 1 : 0"
:loop="acList.length > 3 ? true : false"
:loop="acList.length >= 2 ? true : false"
:pagination="true" :pagination="true"
:autoplay="acList.length > 3 ? { delay: 7000, disableOnInteraction: false } : false"
:autoplay="acList.length >= 2 ? { delay: 3000, disableOnInteraction: false } : false"
:dynamic-bullets="true" :dynamic-bullets="true"
:space-between="16" :space-between="16"
class="myswiper" class="myswiper"
> >
<swiper-slide v-for="item in acList" :key="item.code">
<img :src="item.fileUrl" class="img" />
<swiper-slide v-for="item in acList" :key="item.advertisingCode">
<img :key="item.advertisingCode" :src="item.fileUrl" class="img" />
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<img v-else src="../../assets/images/nodata.svg" class="stay-tuned" alt="" /> <img v-else src="../../assets/images/nodata.svg" class="stay-tuned" alt="" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue' import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination } from 'swiper' import { Autoplay, Pagination } from 'swiper'
import 'swiper/css' import 'swiper/css'
@ -30,7 +31,7 @@ type AcType = {
acList: HomeImage[] acList: HomeImage[]
} }
defineProps<AcType>() defineProps<AcType>()
const modules = ref([Autoplay, Pagination])
const modules = [Autoplay, Pagination]
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

2
src/types/home.d.ts

@ -8,6 +8,6 @@ declare interface HomeBtn {
} }
declare interface HomeImage { declare interface HomeImage {
code: string
advertisingCode: string
fileUrl: string fileUrl: string
} }

2
src/views/Activity/Activity.vue

@ -29,7 +29,7 @@
:initial-slide="actList.length > 3 ? 1 : 0" :initial-slide="actList.length > 3 ? 1 : 0"
:slides-offset-before="actList.length === 2 ? null : -70" :slides-offset-before="actList.length === 2 ? null : -70"
:modules="modules" :modules="modules"
:autoplay="actList.length > 3 ? { delay: 7000, disableOnInteraction: true } : false"
:autoplay="actList.length > 3 ? { delay: 3000, disableOnInteraction: false } : false"
:pagination="{ el: '.list-paginationh' }" :pagination="{ el: '.list-paginationh' }"
:class="{ 'is-center': actList.length === 1 }" :class="{ 'is-center': actList.length === 1 }"
class="swiper-big animate__animated animate__fadeInUp" class="swiper-big animate__animated animate__fadeInUp"

Loading…
Cancel
Save