小程序图片自适应缩放设置

小程序的image组件提供了缩放的模式选择，默认的scaletofill就是设置固定的宽高模式比较少使用，更多的是需要自适应宽高的情况。

widthfix多适用于通栏，width:100%,高度不同设备销孙自适应的情况。此时会按照原图比列自动缩放高度，常用于轮播图。

aspectFill多用用在固定大小的范围内显示，区别是可以保留一边，除去通栏外一般用处较多。

个别情况下需要宏斗链图片始终居中缩放，多用在用户头像圆环之类，一般留在保留中心蔽孙内容的部分，文档中暂没，需要单独设置。

期望颤猜的效果是，image的高度height是自动的。

网上好多说把image的mode设置为widthFit。这种方法还是需要给image设置宽度高度。并不是height自动，而是height固定，图片在显示的时候，显示的图片区域在高度上是自适应的

所以还是需要用js计算

imageLoad: function(e) {

    var $width=e.detail.width,//获取图片真实宽度

        $height=e.detail.height,

        ratio=$width/$height    //图片的真实宽高比例varviewWidth=718,//设置图片显示宽度，左右留有16rpx边距陆掘viewHeight=718/ratio    //计算的高度值varimage=this.data.images

      //将图片的datadata-index作为image对象的key,然后存储图片的宽高值

image[e.target.dataset.index]={

        width:viewWidth,

        height:viewHeight

     茄悉型 }

      this.setData({

          images:image

      })

  }

https://www.cnblogs.com/myboogle/p/6306351.html

    实现图片轮播功能且高度要自适应。

    使用小程序自带组件swiper。

     关键点 ：就是要计算出当前图片的高度并赋值给swiper高度。需要计算是由于swiper必须指定高度不能像div一样自动撑开。

    难点：

    1、问题：切换页面返回 由onhide—>onshow时，出现所有的高度会保持颂祥在最后计算出的那个值，导致高度自适应效果失效。

         原滚哗因：是由于此时imageLoad不再监听。

         解决办法：watch图片列表，给url加参数（时间戳），使其每次都重新加载，使imageLoad监听。野备搏

    2、问题：切换到后台再返回到前台时，初始高度会保持出现在第一张图片的高度，若切换时非第一张图片，就会导致给当前图片高度不正确，被遮挡或者有大片空白。

         原因：给swiper赋值的是 图片列表里第一张的高度。

         解决办法：后台切回前台时，appdata是保持不变的，而当前图片排位已被保存变量，所以取当前图片的高度赋值给swiper高度。

    3、问题：此组件所在页面，下面有跳转到当前页的业务需要，只是渲染数据不同。当返回前一个页面时，初始高度还保留着返回前最后一次的高度，与当前页当前图片高度不符。

         原因：同页面切换时，appdata没有重新赋值的话就不会变化，最后当前图片变量取值了最后出现的那个页面的当前图片。

        解决办法：每切换到一个页面时，在图片组件里，缓存以页面数:当前图片为键值的currents对象。返回到某个页面时，通过当前页面数取得当前图片，从而获得当前初始高度。

PS ： 在设计和解决这些难点时，均遵循着组件的高内聚、低耦合原则，使得更具复用性、稳定性、无依赖。

ps：很多时候开始发现是未解的，待解决之后发现原来并没什么，