HBapp
HBapp
  • 发布:2019-02-22 09:47
  • 更新:2019-03-06 16:40
  • 阅读:141

map组件渲染慢

分类:uni-app

uni-app获取手机宽高,动态渲染给map的时候慢怎么办,有时候成功,有时候失败,渲染过程慢
<map :style="{height:screenHeight+'px',width:screenWidth+'px'}"></map>
js:

uni.getSystemInfo({  
    success: function(res) {  
        console.log(res.windowWidth);  
        console.log(res.windowHeight)  
        that.screenWidth = res.windowWidth;  
        that.screenHeight = res.windowHeight-56;  
        console.log(that.screenWidth)  
        console.log(that.screenHeight)    
    },  
});  
2019-02-22 09:47 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

宽可以固定写750upx,默认就是全屏的宽度;

高可以先设置一个最小高度,比如:500px,然后在获得实际高度后,动态替换为真实值。

  • HBapp (作者)

    宽度写死,无论渲染成不成功,宽都是可以的,只是高这个问题,,比如我设置500px,动态渲染有时候却不成功,一进页面,明明获取到了却没渲染,这是跟我一进来就渲染数据到地图上有关么

    2019-02-23 09:41

meHaoTian

meHaoTian

没有复现到你的问题,你是什么平台出现的这个问题? 安卓 ios 还是小程序 ?

  • HBapp (作者)

    安卓的

    2019-03-06 09:33

  • meHaoTian

    @HBapp:具体系统版本

    2019-03-06 10:54

  • HBapp (作者)

    @meHaoTian:HBuildex是1.3.1的 然后我的手机的是小米note3

    2019-03-06 13:25

  • HBapp (作者)

    @HBapp:或者加我Q:我把代码发你试试

    2019-03-06 13:29

  • DCloud_UNI_HT

    @HBapp:hx 升级一下试试 ,或者做一个简单的demo,放到附件里

    2019-03-06 15:35

  • HBapp (作者)

    @DCloud_UNI_HT:已经升级到最新的版本了,已经附上简单demo,两个问题:<map :style="{height:sHeight+'px',width:sWidth+'px'}"</map>
    data(){
    return{
    sWidth: 600,
    sHeight: 900,
    }
    }
    这样就是显示的结果就会有时候成功,有时候失败,这个需要测试多几次,不然不见效果
    二:uni.getSystemInfo({})获取手机宽高动态赋值给data里面的宽高的时候,也是有时候成功,有时候失败,可能这个你测试几次就出来了

    2019-03-06 16:21

HBapp

HBapp (作者)

这是压缩的文件,解压运行到手机即可

meHaoTian

meHaoTian

如果只是为了单纯的全屏显示地图的,我建议直接使用样式 。因为你获取 getSystemInfo 的话 ,确实有的手机会有些慢才能获取到相关信息,这期间,肯定不会渲染地图。

.map {  
    position: absolute;  
    top:0;  
    bottom: 0;  
    /* bottom: 56px; */  
    width: 100%;  
    height: 100%;  
}  
  • HBapp (作者)

    这样子的话是整个屏幕都是地图,你还要减去头部导航栏的位置跟底部导航栏的位置,减去后这才是真正放地图的位置,直接设置为100%,导航栏会把上下的给遮住

    2019-03-06 16:44

要回复问题请先登录注册