微信小程序自定义轮播图swiper dots默认样式

最新推荐文章于 2024-12-01 17:19:32 发布

原创

最新推荐文章于 2024-12-01 17:19:32 发布 · 2w 阅读

11 ·

CC 4.0 BY-SA版权

本文介绍如何在微信小程序中自定义Swiper组件的dots，通过删除默认的indicator-dots属性并使用view组件来模拟实现个性化指示点。

默认的swiper面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，比如其他颜色的，椭圆形的，方形的等等。。。。

首先当然是要禁用掉（直接删掉）swiper属性indicator-dots，再用view组件模拟dots，对应的代码如下：

<view class="swiper-container">
  <swiper autoplay="auto" interval="5000" duration="500" current="{
  
  {swiperCurrent}}" bindchange="swiperChange" class="swiper">
    <block wx:for="{
  
  {slider}}" wx:key="unique">
      <swiper-item>
        <image