小程序图片两列显示

柔光的暖阳◎ 2022-01-22 11:09 264阅读 0赞

### 效果图 ###

![20190606091729945.png][]

### 问题描述 ###

我的想法是将屏幕分为左右两个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;
    }

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,
        });
      }
    
      
    })

[20190606091729945.png]: /images/20220122/95f738033e27469cafa10e0b4f47423c.png