weex中图片如何占据手机全屏

        写在前面

        项目使用weex跨端,之前让图片占据全屏都是使用获取屏幕高度和宽度,在给图片设置style,多数手机都没问题,但是最近发现有几款华为的机型会出现图片显示不出来,打印日志发现虽然高度获取到了,但是图片就是不显示,不知其所以然;后来查了下资料,以及参考了别人的实现方式,大致确认了下方案;

        具体实现方案如下:

                1.获取屏幕高度

(weex.config.env.deviceHeight / weex.config.env.deviceWidth) * 750;

                 2.将image放到div里面,给div设置高度,image设置flex:1

       <div
        class="flex-full pa img-container"
        :style="{height:imgContenerHight}"
      >
        <image
          class="online-status-img"
          :src="currentBg"
        >
      </div>

           imgContenerHight:就是第一步获取到的屏幕高度

           online-status-img:这里就是flex:1,不用设置其高度和宽度;

亲测有效,多款机型都可以正常显示图片;

          另外,weex文档中又说,list组件需要给出高度才可以正常显示使用,之前也是一直这么用的,获取到屏幕高度,减去其他组件的高度,将其与高度给到list,后来发现,其实还是可以利用flex:1实现;

将list设置为flex:1,那么会自动减掉其他组件/布局的高度,撑满全屏;