UNI APP 中实现顶格轮播图，下有小圆点可以点击圆点切换图片

在UNI App中实现顶部轮播图并配以底部可点击的小圆点功能，你可以使用uni-app内置的`CarouselItem`组件结合自定义的`Indicator`组件来完成。下面是一个简单的步骤说明：

1. 首先，在页面结构上，创建一个`Carousel`组件作为轮播容器，包含多个`CarouselItem`，每个`CarouselItem`代表一张图片。

<template>
  <view class="carousel">
    <uni-carousel :autoplay='autoplay'>
      <uni-carousel-item v-for="(item, index) in items" :key="index">
        <image :src="item.src" />
      </uni-carousel-item>
    </uni-carousel>
    <indicator :count="items.length" @change="handleChange" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      autoplay: true,
      items: [
        // 图片数组
      ],
    };
  },
  methods: {
    handleChange(index) {
      this.$emit('change', index); // 当点击圆点时，触发事件通知外部组件切换图片
    },
  },
};
</script>

2. 自定义`Indicator`组件，展示小圆点，并监听`Carousel`的索引变化，更新对应的圆点状态。

<template>
  <view class="indicator">
    <view v-for="(item, index) in indicators" :key="index" :class="{ active: item === currentIndex }">
      <text>{{ index + 1 }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    count: { type: Number, required: true }, // 圆点总数
  },
  computed: {
    currentIndex() {
      // 获取当前显示的图片索引
      return this.$parent.current;
    },
    indicators() {
      return Array.from({ length: this.count }, (_, i) => ({ index: i }));
    },
  },
};
</script>

记得在你的CSS中添加样式，使得`Indicator`看起来像一个小圆点，当选中时改变背景色或者其他视觉反馈。