zhishifufei_uniapp/components/RecommendPoster/index.vue

<template>
  <view class="advert">
    <swiper
      id="swiper7"
      @change="handleChange"
      class="swiper-container"
      @click="advertClick"
    >
      <swiper-item
        v-for="item in advertList"
        :key="item.id"
        :data-url="item.url"
        class="swiper-slide"
      >
        <image :src="item.banner" mode="aspectFill" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    advertList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
	watch: {
		advertList: {
			deep: true,
			immediate: true,
			handler() {
				console.log(this.advertList);
			},
		},
	},
  data() {
    return {
      index: 0,
    };
  },
  methods: {
    handleChange(e) {
      this.index = e.current;
    },
    advertClick() {
      const { url } = this.advertList[this.index];
      if (!url || url == "#") return;
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style scoped>
.advert {
  position: relative;
  padding: 14rpx 30rpx 38rpx;
  /* margin-top: 14rpx; */
  background-color: #ffffff;
}

.swiper-container {
  height: 200rpx;
}

.advert image {
  display: block;
  width: 100%;
  height: 216rpx;
  /* object-fit: contain; */
}

.advert .swiper-pagination {
  bottom: 14rpx;
  left: 0;
  z-index: 1;
  width: 100%;
  font-size: 0;
}
.advert .swiper-pagination-bullet {
  width: 10rpx;
  height: 10rpx;
  border-radius: 5rpx;
  margin: 0 5rpx;
  background: #b4b4b4;
  opacity: 0.5;
}

.advert .swiper-pagination-bullet-active {
  width: 20rpx;
  background: #2c8eff;
  opacity: 1;
}
</style>