小程序图片两列显示

效果图

 

问题描述

我的想法是将屏幕分为左右两个view，每个view循环一个list。整体flex布局，flex-direction: column就可以了。

代码

xml

css

.cateCommodity {
  display: flex;
}


.item-container {
    position: relative;
    margin-left: 1px;
    flex-direction: column;
    display: flex;
}

.item-container2 {
    display: flex;
    position: relative;
    margin-left: 1px;
    flex-direction: column;
}

.cover {
    width: 100%;
    height: 400rpx;
    display: block; 
}

.back-img{
    display: block; 
    background-color: black;
    width: 50px;
}

.desc {
    margin-top: -40rpx;
    margin-bottom: 10rpx;
    display: flex;
    align-items: center;
}

.desc .right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.desc .faceName {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    margin-left: 10px;
}

.title {
    font-size: 30rpx;
    margin-top: 10rpx;
    margin-left: 20rpx;
    width: 600rpx;
}

.myface {
    display: block;
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
    margin-top: 10rpx;
    margin-right: 20rpx;
}

.nickname {
    font-size: 20rpx;
    margin-top: 6rpx;
    margin-right: 20rpx;
    color: darkgray;
}

 

js

Page({
  data: {
    screenWidth: 350,
    leftitems: [
      {
        "url": "http://127.0.0.1:8081/190523GC92NGTD8H/face/tmp_646734b45590904e90efd541bef64fa8.jpg",
        "width":"250"
       },
      {
        "url": "http://127.0.0.1:8081/190522FM0FBTP0M8/face/tmp_eaea68152e18f8f53b26c36f9525e8b2.jpg",
        "width": "300"
      }

    ],
    rightitems: [
      {
        "url": "http://127.0.0.1:8081/190522F3CXKG14ZC/face/wx541e77df48cf8946.o6zAJs53iDBLVzTSAz8y2-KYzCdE.3Yy3aQ4GBVQHe9bee6d749b8ede59273d73b3fb46e1b.jpg",
        "width": "50"
      },
      {
        "url": "http://127.0.0.1:8081/190522FM0FBTP0M8/face/tmp_eaea68152e18f8f53b26c36f9525e8b2.jpg",
        "width": "300"
      }
      ]


  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var screenWidth = wx.getSystemInfoSync().screenWidth;
    this.setData({
      screenWidth: screenWidth / 2-1.5,
    });
  }

  
})