微信小程序轮播图

1.效果

 2.代码

wxml

<!--page/swipe/swipe.wxml-->
<view class="top-slides-box" style="margin-top: -{{80 + (44 - statusBar)*2}}rpx">
  <view class="swiper">
    <swiper class="swiper-box" indicator-dots="true" current="{{current}}" autoplay="true" interval="5000" duration="500" circular="true" indicator-color="#fdfdfd" indicator-active-color="#ed4861" style="height:{{imgheights[0] - 5}}px;">
      <block wx:for="{{topAdData}}" wx:for-index="idx" wx:key="idx">
        <swiper-item class="swiper-item" data-item="{{item}}" data-index="{{idx}}" bindtap="onSlideClick">
          <image class="img" src="{{item.picturePath}}" mode='widthFix' bindload="imageLoad"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

wxss

/* page/swipe/swipe.wxss */
.top-slides-box {
  position: relative;
  width: 100%;
  margin-top: -80rpx;
}

.top-slides-box .swiper {
  width: 100%;
}

.top-slides-box swiper {
  min-height: 250px;
}

.top-slides-box .swiper .img {
  width: 100%;
}

json

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

js

// page/swipe/swipe.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    statusBar: app.globalData.statusBar,
    imgheights: [], //轮播图高度列表
    current: 0, //当前的轮播图ID，设置为0，不然第一张图片的高度会加载不出来
    topAdData: null, //轮播广告
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 设置轮播图片
    let array = [];
    for(let i=0; i<4; i++){
      let tmp={};
      tmp.picturePath = '/image/ad'+ (i+1) +'.jpg';
      array.push(tmp);
    }
    this.setData({
      topAdData: array
    });
  },

  //图片加载函数，获取每张图片的真实高度，按比例兑换成显示出来的高度，存储下来，以自适应轮播图高度
  imageLoad: function (e) { //获取图片真实宽度  
    var imgwidth = e.detail.width,
    imgheight = e.detail.height,
    //宽高比  
    ratio = imgwidth / imgheight;
    //计算的高度值
    var viewHeight = app.globalData.systemInfo.windowWidth / ratio;

    //把每一张图片的对应的高度记录到数组里  
    let imgheights = this.data.imgheights
    imgheights.push(viewHeight);
    this.setData({
      imgheights: imgheights
    })
  },

  onSlideClick: function (event){
    let item = event.currentTarget.dataset.item;
    let index = event.currentTarget.dataset.index;
    console.log("item:", item);
    console.log("index:", index);
  }

})

在app.js中需要提前获取状态栏高度

    wx.getSystemInfo({
      success: e => {
        this.globalData.statusBar = e.statusBarHeight; //状态栏高度
        let custom = wx.getMenuButtonBoundingClientRect(); //菜单按钮
        this.globalData.custom = custom;
        this.globalData.customBar = (custom.top - e.statusBarHeight) * 2 + custom.height + 4;
        //计算得到定义的状态栏高度
        this.globalData.systemInfo = e;
      }
    })