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: {
      getData() {

        // todo: fetch

        this.bannerList = [
          {
            image: '/static/image/temp-14.png',
          },
          {
            image: '/static/image/temp-14.png',
          },
          {
            image: '/static/image/temp-14.png',
          },
          {
            image: '/static/image/temp-14.png',
          },
          {
            image: '/static/image/temp-14.png',
          },
          {
            image: '/static/image/temp-14.png',
          },
        ]

      },
			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>