需求背景:
实现图片轮播功能且高度要自适应。
技术实现思路:
使用小程序自带组件swiper。
关键点:就是要计算出当前图片的高度并赋值给swiper高度。需要计算是由于swiper必须指定高度不能像div一样自动撑开。
难点:
1、问题:切换页面返回 由onhide—>onshow时,出现所有的高度会保持在最后计算出的那个值,导致高度自适应效果失效。
原因:是由于此时imageLoad不再监听。
解决办法:watch图片列表,给url加参数(时间戳),使其每次都重新加载,使imageLoad监听。
2、问题:切换到后台再返回到前台时,初始高度会保持出现在第一张图片的高度,若切换时非第一张图片,就会导致给当前图片高度不正确,被遮挡或者有大片空白。
原因:给swiper赋值的是 图片列表里第一张的高度。
解决办法:后台切回前台时,appdata是保持不变的,而当前图片排位已被保存变量,所以取当前图片的高度赋值给swiper高度。
3、问题:此组件所在页面,下面有跳转到当前页的业务需要,只是渲染数据不同。当返回前一个页面时,初始高度还保留着返回前最后一次的高度,与当前页当前图片高度不符。
原因:同页面切换时,appdata没有重新赋值的话就不会变化,最后当前图片变量取值了最后出现的那个页面的当前图片。
解决办法:每切换到一个页面时,在图片组件里,缓存以页面数:当前图片为键值的currents对象。返回到某个页面时,通过当前页面数取得当前图片,从而获得当前初始高度。
PS: 在设计和解决这些难点时,均遵循着组件的高内聚、低耦合原则,使得更具复用性、稳定性、无依赖。
具体实现:
ps:很多时候开始发现是未解的,待解决之后发现原来并没什么,😄,希望我们在发现问题解决问题的路上结伴而行孜孜不倦~ 有写的不到之处望能不吝赐教,欢迎随时交流,共勉~ 😊