likes
comments
collection

微信小程序高度的完美适配

作者站长头像
站长
· 阅读数 7

微信小程序高度的完美适配

  • 小程序的宽任何机型都是750rpx,但是画布canvas的默认单位是px,可能会出现需要怪异的样式,我们可以用到wx.getSystemInfoSync().windowWidthwx.getSystemInfoSync().windowHeight分别获取到窗口的宽高,请注意获取到的宽高单位都是px,所以需要利用宽度和750的比值转换一下;

  • 此外,小程序scroll-view组件也会遇到高度适配的问题,scroll-view需要给他一个固定的高度,但是所有的机型都用同一个高度就可能会出现scroll-view铺不满剩余高度,所以可以通过wx.getSystemInfoSync()获取到屏幕的可用高度,减去其他固定的高度就可以让scroll-view组件的铺满剩余的屏幕高度,避免不同机型出现怪异现象;

  • 例如:我们已知该页面除了scroll-view组件以外其余的组件高度为150rpx; scroll-view组件的高度应该怎么做适配呢?

onload: function(){
    var windowWidth = wx.getSystemInfoSync().windowWidth;
    var windowHeight = wx.getSystemInfoSync().windowHeight;
    //rpx与px单位之间的换算 : 750/windowWidth = 屏幕的高度(rpx)/windowHeight
    var scroll_height = 750*windowHeight/windowWidth-150;
     this.setData({
        scroll_height:scroll_height
    })  
}
  • 然后通过行内式把scroll-view组件的高度样式填充完毕就完成了。
<scroll-view style="height:{{scroll_height}}rpx;">这里是scroll-view的内容</scroll-view>