【小程序】轮播图--下标指示点（通俗易懂）

前言

1、在小程序中轮播图只需要通过小程序的组件既可以实现
2、但是轮播图的面板指示点，因为面板指示点不支持，所以我们只能通过自定义结构的方式
3、所以本章内容主要针对的是轮播图下标指示点的样式配置

轮播图的基本设置

1、autoplay表示自动播放 2、src用来存放图片

<view class="swiper-box">
  <swiper autoplay> 
      <swiper-item>
          <image class="img" src="../../../assets/index/banner/swiper1.png"></image>
      </swiper-item>
      <swiper-item>
          <image class="img" src="../../../assets/index/banner/swiper2.png"></image>
      </swiper-item>
      <swiper-item>
          <image class="img" src="../../../assets/index/banner/swiper3.png"></image>
      </swiper-item>
  </swiper>
</view>

插入轮播图下标

1、设置一个block表示每跳转一个页面下标定位的颜色跟着改变（如图所示）

2、用bannerList表示图片列表，再用activeIndex表示导航到达的哪个图片 3、getSwiperIndex事件监听改变轮播图下标增量效果的位置

<view class="swiper-wrapper">
  <swiper
    autoplay
    class="swiper"
    interval="2000"
    indicator-color="rgba(0, 0, 0, .3)"
    bindchange="getSwiperIndex"
  >
  <block wx:for="{{ bannerList }}" wx:key="index">
      <swiper-item class="swiper-item">
          <image class="img" src="{{item}}"/>
      </swiper-item>
  </block>
  </swiper>
  <view class="indicator">
    <text
      wx:for="{{bannerList.length}}"
      wx:key="id"
      class="{{ index === activeIndex ? 'active rectangle' :'rectangle' }}"
    ></text>
  </view>
</view>

Component({
    properties: {
      bannerList: {
        type: Array,
        //此处为图片路径，注意更改为自己图片的路径
        value: [
            '../../../assets/index/banner/swiper1.png',
            '../../../assets/index/banner/swiper1.png',
            '../../../assets/index/banner/swiper1.png',
            '../../../assets/index/banner/swiper4.png',
        ]
      }
    },
    data: {
        activeIndex:0
    },
    methods: {
        getSwiperIndex(event){
            const { current } = event.detail
            this.setData({activeIndex:current})
        }
    }
  })

.swiper-wrapper {
    position: relative;
    .swiper {
      height: 350rpx;
      overflow: hidden;
    }
  
    .swiper-item {
      height: 350rpx;
      overflow: hidden;
  
      .img{
        height: 100%;
        width: 100%;
      }
    }
  
    .indicator {
      display: flex;
      justify-content: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 15rpx;
  
      // 面板指示器
      .rectangle {
        width: 10rpx;
        height: 10rpx;
        margin: 0 10rpx;
        border-radius: 100%;
        background-color: rgba(233, 228, 228, 0.9);
      }
  
      .active {
        background-color: #36acff;
      }
    }
  }

插入点击跳转事件

1、在swiper-item中添加navigator组件 注意：url表示要跳转的链接(工具自己的页面修改)

<swiper-item class="swiper-item">
        <navigator
          class="navigator"
          url="/pages/servier/detail/detail?servierId=id"
        >
          <image class="img" src="{{ item }}"></image>
        </navigator>
 </swiper-item>

2、给navigator加上样式

.img,.navigator{
        height: 100%;
        width: 100%;
      }