小程序轮播

// 轮播效果1

banner1.wxml

<swiper indicator-dots="true" autoplay="true" interval="4000" duration="1200" indicator-active-color="#fa436a">
    <block wx:for="{{bannerData}}" wx:key="index">
      <swiper-item>
        <image src="{{item.src}}" mode="widthFix" catchtap="show" />
      </swiper-item>
    </block>
  </swiper>

banner1.wxss

swiper {
  height: 300rpx;
}
swiper-item image {
  width: 100%;
  height: 100%;
}

// 轮播效果2

banner2.wxml

<view class="wrap">
  <swiper class="swipers" autoplay="true" interval="5000" duration="1000" current="{{currentSwiper}}" bindchange="swiperChange">
    <block wx:for="{{bannerData}}" wx:key="index">
      <swiper-item>
        <image src="{{item.src}}" class="slide-image" width="100%" height="150"></image>
      </swiper-item>
    </block>
  </swiper>
  <!--重置小圆点的样式  -->
  <view class="dots">
    <block wx:for="{{bannerData}}" wx:key="index">
      <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
    </block>
  </view>
</view>

banner2.wxss

.wrap {
  height: auto;
  position: relative;
  width: 100%;
}

.swipers {
  height: 350rpx;
  width: 100%;
}

.slide-image {
  display: block;
  width: 100%;
  height: 100%;
}

/*用来包裹所有的小圆点  */

.dots {
  width: 100%;
  height: 36rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  bottom: 20rpx;
}

/*未选中时的小圆点样式 */

.dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  margin-right: 36rpx;
  background-color: white;
}

/*选中以后的小圆点样式  */

.active {
  width: 40rpx;
  height: 20rpx;
  border-radius: 10rpx;
  background-color: #fa436a;
}