Taro 小程序轮播图Swiper添加自定义指示器

效果如图：

自定义的指示器需放在Swiper组件外层，通过绑定同一个列表数据list，通过点击事件SelectOptions,将当前index传值赋给currentIndex即可， 组件代码如下：

       {/* 轮播图 */}
        
          {
            list.map((item, index) => (
              
                
                  
                  
                    {item.name}
                    {item.desc}
                  
                
              
            ))
          }
        
        {/* 自定义轮播图指示器 */}
        
          {list.map((item, index) => (
            
          ))}
        

CSS代码如下：

  // 指示器
    .spot-pagination {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      .spot-pagination-bullet {
        margin-right: 8px;
        border-radius: 50%;
        height: 16px;
        width: 16px;
        background: #E6E6E6;
      }
      // 当前指示点样式
      .spot-pagination-bullet-active {
        background: #D20202;
      }
    }