微信小程序——轮播图

这个轮播图，切换图片时候会有一个切换效果。

.wxml文件中代码：

 <!-- 顶部轮播图——开头 -->
      <view class='map_Sowing'>
        <view class="article_swiper">
          <swiper class="swiper_img" autoplay="true" circular="true" indicator-dots="true" indicator-color="rgba(0, 0, 0, .2)" indicator-active-color="#2ECC71" display-multiple-items="1" interval="3000" duration="800" previous-margin="15rpx" next-margin="15rpx"
            bindchange="intervalChange">
            <block wx:for="{{articleImg}}" wx:for-index="index">
              <swiper-item class="swiper_box {{isIndex==index?'':'no_active_class'}}">
                <image src="{{item.url}}" class="slide-image top_image" mode="scaleToFill" />
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>
      <!-- 顶部轮播图——结尾 -->

 .js文件中代码：其中isIndex表示目前展示的图片下标。

  data: {
    
    articleImg: [{
        url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532932945037&di=d87b89574b57c0ac5055a4416e9c409c&imgtype=0&src=http%3A%2F%2Ff6.topitme.com%2F6%2Ffd%2F0c%2F11270975070760cfd6o.jpg"
      },
      {
        url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532932945037&di=d87b89574b57c0ac5055a4416e9c409c&imgtype=0&src=http%3A%2F%2Ff6.topitme.com%2F6%2Ffd%2F0c%2F11270975070760cfd6o.jpg"
      },
      {
        url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532932945037&di=d87b89574b57c0ac5055a4416e9c409c&imgtype=0&src=http%3A%2F%2Ff6.topitme.com%2F6%2Ffd%2F0c%2F11270975070760cfd6o.jpg"
      },
      {
        url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532932945037&di=d87b89574b57c0ac5055a4416e9c409c&imgtype=0&src=http%3A%2F%2Ff6.topitme.com%2F6%2Ffd%2F0c%2F11270975070760cfd6o.jpg"
      },
      {
        url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532932945037&di=d87b89574b57c0ac5055a4416e9c409c&imgtype=0&src=http%3A%2F%2Ff6.topitme.com%2F6%2Ffd%2F0c%2F11270975070760cfd6o.jpg"
      }
    ],
    isIndex: 0
  },


// 监听当前轮播图下标
  intervalChange(e) {
    // console.log(e)
    this.setData({
      isIndex: e.detail.current
    })
  },

 .wxss文件代码：

.swiper_box {
  padding: 0 10rpx;
  box-sizing: border-box;
  transition: padding 0.5s;
}

.top_image {
  width: 100%;
  height: 240rpx;
  border-radius: 10rpx;
  transition: height 0.3s;
}
swiper {
  height: 100%;
  overflow: auto;
  /* margin-bottom: 20rpx; */
}

.article_swiper {
  height: 240rpx;
  margin-bottom: 30rpx;
}

.no_active_class {
  padding: 20rpx 0;
}

.no_active_class .top_image {
  height: 200rpx;
}