uniapp swiper自定义指示器，使指示器可以显示文字

可以通过自定义 swiper 的 indicator slot 来实现指示器可以显示文字的效果。

首先，在 swiper 组件中添加一个 indicator slot：

<swiper>
  <swiper-item v-for="(item, index) in list" :key="index">
    <!-- swiper item 内容 -->
  </swiper-item>
  <!-- 自定义 indicator slot -->
  <template #indicator>
    <div v-for="(item, index) in list" :key="index" class="swiper-indicator">
      <span>{{ item.text }}</span>
    </div>
  </template>
</swiper>

然后，定义样式来实现指示器的布局和样式：

.swiper-indicator {
  display: inline-block;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}

.swiper-indicator.active {
  background-color: red;
}

最后，通过监听 swiper 的 change 事件来更新指示器的选中状态：

export default {
  data() {
    return {
      list: [
        { text: '第一步' },
        { text: '第二步' },
        { text: '第三步' },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    onChange(e) {
      this.activeIndex = e.detail.current;
    },
  },
};

在模板中，通过 v-bind:class 绑定 active 类来实现选中状态：

<div
  v-for="(item, index) in list"
  :key="index"
  :class="['swiper-indicator', { active: index === activeIndex }]">
  <span>{{ item.text }}</span>
</div>

这样就实现了一个可以显示文字的 swiper 自定义指示器。