微信小程序轮播图+自定义高度

重新写一个轮播图，在上次的基础上，添加了衔接滑动的功能，并对上一次写的进行一次完善。如有问题请在评论区描述问题。

.wxml 页面

<view class="image_swiper">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" duration="{{duration}}" style='height:{{Height}}'>
      <block wx:for="{{images}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight' />
        </swiper-item>
      </block>
    </swiper>
  </view>

.wxss页面

page{
  background-color: #fff;
  height:100%;
}
.image_swiper{
  width:100%;
  height:auto;
}
.image_swiper .slide-image{
  width:100%;
  height:auto;
  display:block;
  
}

.js页面

Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: [
      '/images/slideshow1.jpg',
      '/images/slideshow2.jpg',
      '/images/slideshow3.jpg',
      '/images/slideshow4.jpg',
      '/images/slideshow5.jpg',
      '/images/slideshow6.jpg',
      '/images/slideshow7.jpg',
      '/images/slideshow8.jpg'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true,  //是否自动切换
    interval: 3000, //自动切换时间间隔
    circular: true,   //是否采用衔接滑动
    duration: 500, //滑动动画时长
    Height: "",    //这是swiper要动态设置的高度属性
  },
  //设置图片轮显高度
  imgHeight: function (e) {
    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
    var imgh = e.detail.height; //图片高度
    var imgw = e.detail.width; //图片宽度
    var h = 25;
    //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    var swiperHeight = (winWid * imgh / imgw) + "px";
    this.setData({
      Height: swiperHeight //设置高度
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})