studytour-front/components/home/swiperView.vue

<template>
  <view class="swiper">
    <uv-swiper 
      :list="bannerList" keyName="image" 
      indicator 
      indicatorMode="dot" 
      indicatorInactiveColor="rgba(255, 255, 255, 0.7)" 
      height="228rpx"
      @click="onClickBanner"
    ></uv-swiper>
  </view>
</template>

<script>
  export default {
		data() {
			return {
				bannerList: [],
			}
		},
		created() {
      this.getData()
    },
    methods: {
      async getData() {
				try {
					this.bannerList = (await this.$fetch('queryBannerList', { type: 1 })).records // type：0-首页顶部 1-首页中部
				} catch (err) {

				}
      },
			onClickBanner(index) {
				console.log('onClickBanner', index)
			},
    },
  }
</script>

<style scoped lang="scss">
	.swiper {
		border-radius: 32rpx;
		overflow: hidden;

		/deep/ .uv-swiper-indicator__wrapper__dot,
		/deep/ .uv-swiper-indicator__wrapper__dot--active {
			margin: 0 4rpx;
			width: 30rpx;
			height: 10rpx;
		}
		/deep/ .uv-swiper-indicator__wrapper__dot--active {
			background: linear-gradient(to right, #21FEEC 40%, #019AF9);
		}
	}
</style>