收藏
回答

如何在小程序直播的页面中实现瀑布流?

先上图,这是快手的页面,想把小程序的页面也做成这样两列,然后左右不等高

第一个方案很简单,就是把获取到的直播间直接平分两列,但是有可能会造成某一列的高度高太多(因为直播间的图高度不等),不美观,放弃

第二个方案就是根据左右两列的高度来判断,上代码

templist就是后台调用【获取直播房间列表】接口,获取到的直播房间列表,然后根据房间列表中的cover_img背景图的地址,用wx.getimageinfo来获取图片宽高的信息

这个解决方案在开发时可以用,但是一上线就失效了,检查后发现wx.getimageinfo获取网络图片时,需要将域名提前写进downloadfile安全域名中,这时候问题就来了:

【获取直播房间列表】接口中cover_img背景图的地址,是http协议,例如:http://mmbiz.qpic.cn/mmbiz_jpg/xxxxxxxxxxxxxxxxxxxxx

但是downloadfile安全域名中,网址是https协议,将mmbiz.qpic.cn填入后,wx.getimageinfo依然获取不到网络图片,图片高度获取都是失败的

所以现在如何实现这种类似快手的瀑布流布局就成了问题,只能通过服务器储存图片信息才可以实现了吗,还是说还有其他可以获取网络图片宽高的方法?

现在唯一能想到的就是弄一个隐藏的的image,在图片加载完成时的事件中获取宽高了

最后一次编辑于  2020-05-08
回答关注问题邀请回答
收藏

1 个回答

  • 不爱梨-🍐🍓🍉🍎🍇🍒
    不爱梨-🍐🍓🍉🍎🍇🍒
    2020-05-26

    请问使用第二种方法 getImageInfo 不会产生异步问题吗 下面的width获取的不对

    2020-05-26
    有用
    回复 5
    • 一隅宇
      一隅宇
      2020-05-27
      我用的时候没产生异步的问题,查了一下这个方法好像确实是异步,不过我现在就老老实实用第一种,第二种不用了
      2020-05-27
      回复
    • 不爱梨-🍐🍓🍉🍎🍇🍒
      不爱梨-🍐🍓🍉🍎🍇🍒
      2020-05-27回复一隅宇
      我已经实现了,用的第二种,直接把getImageInfo放在Promise里面获取 然后再赋值,不过这样有点慢,页面加载的时间会很久是一个问题,毕竟要对每个循环再执行一次操作
      2020-05-27
      回复
    • 一隅宇
      一隅宇
      2020-05-27回复不爱梨-🍐🍓🍉🍎🍇🍒
      那你这样如何解决图片地址的问题呢?关闭掉不校验合法域名还能正常用吗
      2020-05-27
      回复
    • 不爱梨-🍐🍓🍉🍎🍇🍒
      不爱梨-🍐🍓🍉🍎🍇🍒
      2020-05-27回复一隅宇
      看了一下 关掉不检验是不能用的,现在图片的是http,但是白名单需要https,只能等商议以下看怎么解决了,如果图片是https的去设置一下域名 应该就是可以的了
      2020-05-27
      回复
    • 一隅宇
      一隅宇
      2020-05-27回复不爱梨-🍐🍓🍉🍎🍇🍒
      嗯,问题就是他这个不是https,设置了也没用,我们这商量了下觉得自己作图不会出现图片比例相差太大的情况,所以就直接平均左右分了
      2020-05-27
      回复
登录 后发表内容
问题标签