如何在HarmonyOS鸿蒙Next快应用中自定义轮播图指示点组件

什么是轮播图指示点组件

快应用swiper组件可以用来播放轮播图，并且swiper组件自带指示点，见下图1，但是指示点风格固定，不能修改，无法满足定制化的需求。本文轮播图指示点是配合快应用swiper组件，告诉你如何自定义实现指示点。

图1 快应用swiper默认指示点

基本实现

轮播图指图示点组件化设计

将“轮播图指示点设计”设计成子组件swiper-dot，方便引用。swiper-dot可设置多种显示模式、可设置指示点颜色、边框等。swiper-dot需要和快应用swiper组件配套使用，在页面的template中使用如下：

<import name="swiper-dot" src="./swiperdot.ux"></import>
<template>
  <div class="container">
    <swiper-dot class="swiper-dot-box"
      info={{info}} current={{current}} mode="{{mode}}"
      dots-styles={{dotsStyles}} field="content">
       <swiper class="swiper-box"
           @change="change" indicator="false" index="{{current}}">
          <block for="(index, item) in info">
            <image class="img" src="{{item.url}}" @click="onBanner(index)" />
          </block>
        </swiper>
      </swiper-dot>
  </div>
</template>

子组件swiper-dot属性设计

支持的属性

支持的事件

无

swiper-dot子组件布局

• swiperdot需要和快应用swiper组件配套使用，swiper组件是用来展示图片或者其他内容的。每个页面的swiper内容都不一样，所以在实现布局时使用了slot 组件来承载父组件中的swiper内容，由使用swiperdot组件的页面来完成轮播布局。
• 指示点有default、dot、round、nav、indexes五种模式，每种模式都是一个div布局，通过mode属性值来控制当前显示哪个。
• 指示点布局采用absolute布局，通过bottom属性将指示点显示在距离swiper底部。
• 指示点部分是横向div布局，指示点用text实现。
• 如果当前的几种模式不满足你的要求，你可以自行修改或者添加另外一种模式。

swiper-dot布局实现

指示点css

指示点模式切换

当您希望用户按照自己的喜好去切换想要的模式及样式时，swiperdot组件需要及时更新响应。

• 通过快应用$watch(‘xx’, ‘xxx’)方法监听指示点类型 mode 和 指示点样式dotsStyles两个属性的变化，从而更新样式绑定变量dots，触发界面刷新。
• 当切换到indexes模式时，指示点的宽度和高度值单独设置为30。

相关代码如下：