利用screenWidth与screenHeight手算布局

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

1. // 设备信息
2. wx.getSystemInfo({
3. success: function(res) {
4. that.screenWidth = res.windowWidth;
5. that.screenHeight = res.windowHeight;
6. that.pixelRatio = res.pixelRatio;
7. }
8. });

然后挖坑在布局页面

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

最后在js中实现数值

1. setImageWidth: function () {
2. var screenWidth = getApp().screenWidth;
3. var imageWidth = (screenWidth - 130) / 3;
4. this.setData({
5. imageWidth: imageWidth
6. });
7. },
8. setSideHeight: function () {
9. this.setData({
10. sidebarHeight: getApp().screenHeight
11. });
12. },

如图：

源码下载：https://git.oschina.net/dotton/lendoo-wx