小程序踩坑记2md—图片轮播高度自适应组件

需求背景：

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

技术实现思路：

使用小程序自带组件swiper。

关键点：

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

难点：

1. 高度自适应失效

• 描述：切换页面返回 由onhide—>onshow时，出现所有的高度
  会保持在最后计算出的那个值，导致高度自适应效果失效。
• 原因：是由于此时imageLoad不再监听。
• 解决办法：watch图片列表，给url加参数（时间戳），使其每次都重新加载，使imageLoad监听。

2. 前后台切换初始高度不符

• 描述：切换到后台再返回到前台时，初始高度会保持出现在第一张图片的高度，若切换时非第一张图片，就会导致给当前图片高度不正确，被遮挡或者有大片空白。
• 原因：给swiper赋值的是 图片列表里第一张的高度。
• 解决办法：后台切回前台时，appdata是保持不变的，而当前图片排位已被保存变量，所以取当前图片的高度赋值给swiper高度。

3. 同页面切换初始高度不符

• 描述：此组件所在页面，下面有跳转到当前页的业务需要，只是渲染数据不同。当返回前一个页面时，初始高度还保留着返回前最后一次的高度，与当前页当前图片高度不符。
• 原因：同页面切换时，appdata没有重新赋值的话就不会变化，最后当前图片变量取值了最后出现的那个页面的当前图片。
• 解决办法：每切换到一个页面时，在图片组件里，缓存以页面数:当前图片为键值的currents对象。返回到某个页面时，通过当前页面数取得当前图片，从而获得当前初始高度。

PS：

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

具体实现：

模版template：

脚本script：

样式style：

Notes:

很多时候开始发现是未解的，待解决之后发现原来并没什么，，希望我们在发现问题解决问题的路上结伴而行孜孜不倦～ 有写的不到之处望能不吝赐教，欢迎随时交流，共勉～