小程序图片两列显示

效果图

 

问题描述

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

代码

xml

<view class='cateCommodity '>
  <view class='item-container'>
    <block wx:for="{{leftitems}}" wx:key="{{item}}">
      <view style='width:{{screenWidth}}px;height:{{item.width}}px;' class='back-img'>
        <image src="{{item.url}}" style='width:{{screenWidth}}px;height:{{item.width}}px;' mode="scaleToFill" bindtap='showVideoInfo' data-arrindex='{{index}}'></image>
      </view>


      <view class="desc">
        <view class="faceName">
          <image class='myface' src="{{item.url}}"></image>
        </view>
      </view>
    </block>
  </view>

  <view class="item-container2">
    <block wx:for="{{rightitems}}" wx:key="{{item}}">
      <view style='width:{{screenWidth}}px;height:{{item.width}}px;' class='back-img'>
        <image src="{{item.url}}" style='width:{{screenWidth}}px;height:{{item.width}}px;' mode="scaleToFill" bindtap='showVideoInfo' data-arrindex='{{index}}'></image>
      </view>


      <view class="desc">
        <view class="faceName">
          <image class='myface' src="{{item.url}}"></image>
        </view>
      </view>
    </block>
  </view>

</view>

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

  
})