效果图：
<!--* @Date: 2024-05-14 17:41:04* @LastEditTime: 2024-05-14 22:15:30* @Description: 轮播图
-->
<template><swiper circular class="swiper" indicator-active-color="#fff" :current="swiperCurrentIndex" @change="handleSwiper":autoplay="autoplay" interval="3000"><swiper-item v-for="(item, index) in swipeList" :key="index"><view class="swiper-img-box" @click="() => jump(item)"><image :src="item.imgUrl" /><!-- <image :src="item.goodsName" /> --></view></swiper-item></swiper><!-- 指示器 --><view v-if="swipeList?.length > 1" class="indicator-wrap" :style="{ width: swipeList?.length * 48 + 'rpx' }"><view class="indicator-list"><view v-for="(item, index) in swipeList" :key="index" class="indicator-item":class="{ active: swiperCurrentIndex === index }" /></view></view>
</template><script setup lang="ts">
import { getGoodsDetail } from '@/services/api-goods';
import { queryActivity } from '@/services/api-market';
import type { IndexQryIndexDataResponse } from '@/types/http-types/index/qryIndexData';
import { GOODS_CATEGORY } from '@/utils/enum';
import { ref, toRefs, withDefaults } from 'vue';
import {onShow,onHide
} from '@dcloudio/uni-app';
import { useStore } from 'vuex';
const store = useStore();
const autoplay=ref(true);//自动轮播
// onShow,onHide解决二次进入小程序轮播疯狂抖动问题
onShow(() => {autoplay.value=true
});
onHide(() => {autoplay.value=false
});
interface PropsType {data: IndexQryIndexDataResponse['bannerList'];
}
const props = withDefaults(defineProps<PropsType>(), {data: [],
});
const { data: swipeList } = toRefs(props);
let swiperCurrentIndex = ref(0);
const handleSwiper = (event) => {const { current } = event?.detail;swiperCurrentIndex.value = current;
};
const jump = async (item) => {console.log(item);let url = '';// 0-无跳转事件; 1-文章; 2-跳转活动; 3-跳转商品switch (item.clickEventType) {case 0:break;case 1:url = `/sub-pages/user/agreement/index?hrefUrl=${encodeURIComponent(item.clickUrl)}`;break;case 2:const activityRes = await queryActivity({ activityId: item.clickUrl });const activityData = activityRes?.data || null;if (activityData.status === 1) url = `/sub-pages/market/activity/index?activityId=${item.clickUrl}`;else {uni.showToast({title: '该活动已下架',icon: 'none',});}break;case 3:const res = await getGoodsDetail({ id: item.clickUrl });const data = res?.data || null;//category 商品类型1游览2出行if (data.status === 1) {// 保存到storestore.commit('setSelectedRecommendGoodInfo', data);if (data.category === GOODS_CATEGORY.VISIT) {// 切换页面// 初始化页面loadingstore.dispatch('setIsPageLoading', true);store.commit('updateBottomTabActive', 'book');store.commit('updateTopTabActive', 'visit');} else if (data.category === GOODS_CATEGORY.TRIP) {// 切换页面// 初始化页面loadingstore.dispatch('setIsPageLoading', true);store.commit('updateBottomTabActive', 'book');store.commit('updateTopTabActive', 'trip');}} else {uni.showToast({title: '该商品已下架',icon: 'none',});}break;default:break;}if (url !== '') {uni.navigateTo({ url });}
};</script><style lang="scss">
.swiper {width: 670rpx;height: 320rpx;overflow: hidden;border-radius: 20rpx;box-shadow: 0 20rpx 12rpx -12rpx rgba(9, 35, 77, 0.3);//设置阴影0 20rpx 12rpx -12rpx分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径.swiper-img-box {height: 344rpx;border-radius: 20rpx;}image {width: 100%;height: 320rpx;border-radius: 20rpx;display: block;}
}.indicator-wrap {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);z-index: 1;display: flex;align-items: center;justify-content: center;pointer-events: none;.indicator-list {display: flex;justify-content: flex-start;align-items: center;.indicator-item {width: 4rpx;height: 4rpx;background: #BABABA;border-radius: 50%;backdrop-filter: blur(10rpx);&:not(:first-child) {margin-left: 8rpx;}&.active {width: 24rpx;height: 4rpx;background: #616161;border-radius: 4rpx;backdrop-filter: blur(10rpx);}}}
}
</style>