vue-awesome-swiper renderCustom

vue-awesome-swiper的renderCustom属性用于自定义分页器。通过设置pagination的type属性为custom，然后在renderCustom方法中编写自定义的分页器内容。

以下是一个示例代码：

<template>
  <div>
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(item, index) in swiperItems" :key="index">
        <!-- 轮播内容 -->
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" :class="{'custom-pagination': true}">
        <!-- 自定义分页器内容 -->
        <div v-for="(item, index) in swiperItems" :key="index" class="custom-pagination-item" @click="goToSlide(index)"></div>
      </div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOptions: {
        // 其他配置项
        pagination: {
          el: '.swiper-pagination',
          type: 'custom',
          renderCustom: function (swiper, current, total) {
            // 自定义分页器渲染方法
            // 可以根据需要自定义分页器的样式和交互逻辑
          }
        }
      },
      swiperItems: [
        // 轮播内容数据
      ]
    }
  },
  methods: {
    goToSlide(index) {
      // 点击分页器跳转到指定轮播项
      this.$refs.swiper.swiper.slideTo(index)
    }
  }
}
</script>

在上述代码中，我们通过设置pagination的type属性为custom，并在renderCustom方法中编写自定义的分页器内容。在自定义分页器内容中，我们使用v-for指令遍历轮播项数据，并为每个分页器项绑定点击事件，点击时调用goToSlide方法跳转到对应的轮播项。