【微信小程序】轮播图自定义指示点

继【微信小程序】轮播图当前图放大效果 博客的基础之上改造的.

js

/**
   * 页面的初始数据
   */
  data: {
    swiperImgUrls: [
      'https://img03.sogoucdn.com/app/a/100520093/9243fbcd523532c7-65a10dc900adf004-16cb2e34a14409c94f53ee8772786500.jpg',
      'https://img04.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-4dd500a08535394bc4c64c68f672a2d6.jpg',
      'https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg'
    ],
    swiperCurrent: 0
  },

  /**
   * 轮播自动滑动时，获取当前的轮播id
   */
  swiperChange(e) {
    const that = this;
    that.setData({
      swiperCurrent: e.detail.current
    })
  },

  /**
   * 图片手动滑动时，获取当前的轮播id
   */
  imageChange(e) {
    const that = this;
    that.setData({
      swiperCurrent: e.currentTarget.id
    })
  },

wxml

<view class='swiper-container'>
  <swiper class='swiper-block' autoplay='true' circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' bindchange='swiperChange' interval='5000' duration='1000' indicator-color='rgba(0, 0, 0, .3)' indicator-active-color='red'>
    <block wx:key='unique' wx:for='{{swiperImgUrls}}'>
      <swiper-item class='swiper-item'>
        <image bindchange='imageChange' id='{{index}}' src='{{item}}' class='slide-image {{swiperCurrent == index ? "active" : ""}}' />
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义指示点dot -->
  <view class="dots">
    <block wx:for="{{swiperImgUrls}}" wx:key="unique">
      <view class='dot {{swiperCurrent == index ? "active" : ""}}'></view>
    </block>
  </view>
</view>

wxss

.swiper-container {
  position: relative;
}

.swiper-block {
  height: 480rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: unset;
}

.slide-image {
  height: 320rpx;
  width: 520rpx;
  border-radius: 9rpx;
  box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
  margin: 0rpx 30rpx;
  z-index: 1;
}

.active {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}

/* dot定位位置 */

.swiper-container .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}

/* 未经过前dot */

.swiper-container .dots .dot {
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background-color: transparent;
  border-radius: 8rpx;
  border: 0.1rpx solid #31c27c;
  transition: all 0.6s ease-in-out;
}

/* 经过后dot */

.swiper-container .dots .dot.active {
  width: 24rpx;
  background: #31c27c;
}

转载请注明出处！