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

小程序踩坑记2—图片轮播高度自适应组件,第1张

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

    使用小程序自带组件swiper。

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

    难点:

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

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

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

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

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

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

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

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

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

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

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12459912.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存