微信小程序利用screenWidth与screenHeight手算布局

摘要: 通过getSystemInfo取到屏幕宽高，单位为px

在app.js中获取到设备宽高

// 设备信息
wx.getSystemInfo({
success: function(res) {
that.screenWidth = res.windowWidth;
that.screenHeight = res.windowHeight;
that.pixelRatio = res.pixelRatio;
}
});

然后挖坑在布局页面

<view class="sidebar" style="height: {{sidebarHeight}}px;">
<dt>
<image src="{{item.avatar.attributes.url}}" mode="scaleToFit" bindtap="avatarTap" data-object-id="{{item.objectId}}" style="width:{{imageWidth}}px; height: {{imageWidth}}px;"/>
</dt>

最后在js中实现数值

setImageWidth: function () {
var screenWidth = getApp().screenWidth;
var imageWidth = (screenWidth - 130) / 3;
this.setData({
imageWidth: imageWidth
});
},
setSideHeight: function () {
this.setData({
sidebarHeight: getApp().screenHeight
});
},

如图：



源码下载：http://git.oschina.net/dotton/lendoo-wx，本文涉及代码存于/pages/category/category文件夹中。

对移动开发有兴趣的朋友可以关注我的公众号【huangxiujie85】与我交流讨论，给我留言或文章评论。