小程序轮播图显示按原图片宽高显示

大体思路：通过获取原图片的宽高得出宽高比例，结合当前屏幕的宽度算出新高度赋值给swiper。

index.js

data: {

    imgUrls: [

      'http://www.aliddmall.com/images/app_banners/1.jpg',

      'http://www.aliddmall.com/images/app_banners/2.jpg'

    ],

    indicatorDots: true,

    autoplay: true,

    interval: 3000,

    duration: 500,

    Height: ""     //这是swiper要动态设置的高度属性

  },

index.wxml

<swiper indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height:{{Height}}'>

<block wx:for="{{imgUrls}}" wx:key="unique">

  <swiper-item>

  <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight' />

  </swiper-item>

</block>

</swiper>

参考链接: https://www.jb51.net/article/138776.htm