Mini Program's picture adaptation problem

there is no adaptive picture height in Mini Program

writes a goodsList component. According to the return situation of the background, there are two formats: video and image.

goodsList.wxml

<view class="goods-container">
  <view class="goods-lists">
    <cover-view 
      class="goods-list" 
      wx:for="{{goodsList}}" 
      wx:key="{{index}}" 
      style="height:{{item.height}}">
      <cover-view 
         wx:if="{{item.type === 1}}" 
         style="height:{{item.height}};width:{{item.width}}">
      <cover-image 
        data-index="{{index}}" 
        src="{{item.imgPath}}" 
        mode="widthFix"
        bindload="imageLoad"
      ></cover-image>
      </cover-view>
      <view wx:else >
        <video 
        src="{{item.videoPath}}"
        ></video>
      </view>
    </cover-view>
  </view>
</view>

goodsList.wxss

.goods-lists{
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.goods-list{
  width: 344rpx;
  margin-right: 22rpx;
}
.goods-list:nth-of-type(2n){
  margin-right: 0;
}
.goods-list video{
  width: 100%;
}
.goods-list image{
  width: 100%;
  height: 100%;
}

use

in a file
<view class="main">
    <view class="share-title c3 fz28">TA</view>
    <goods-list goods-list="{{goodsList}}" bind:imageLoad="imageLoad"></goods-list>
  </view>
imageLoad: function(e){
    // 
    const orgionWidth = e.detail.detail.width,
      orgionHeight = e.detail.detail.height;
    const ratio = orgionWidth / orgionHeight;
    console.log(orgionWidth,orgionHeight,ratio);
    // 
    const width = 344,
      heigth = 344 / ratio;
    // 
    const index = e.detail.target.dataset.index;
    let imgs = this.data.goodsList;
    if (orgionWidth > width){
      imgs[index].height = heigth +"rpx";
      imgs[index].width = width + "rpx";
    }else{
      imgs[index].height = orgionWidth + "rpx";
      imgs[index].width = orgionHeight + "rpx";
    }
    this.setData({
      goodsList: imgs
    })
  }

but the last one is this

clipboard.png

the following picture is supposed to be on top.


you can implement this using flex layout. The approximate code is as follows: (there may be something inaccurate, but I think you should be able to understand. After all, I don't use native Mini Program, I use framework, and Wechat's api may not be accurate)
< view class='list' >

<view class='listItem'>
    <view class="card"
        wx:for="{{idenList}}" 
        wx:key="{{item.idenId}}" 
        wx:if="{{index%2 == 0}}" 
        cardImg="{{item.idenImg}}" 
        cardText="{{item.idenText}}" 
        commentNum="{{item.commentNum}}" 
        likeNum="{{item.likeNum}}"> 
     </view> 
 </view> 
 <view class='listItem'> 
     <view class="card"
         wx:for="{{idenList}}" 
         wx:key="{{item.idenId}}" 
         wx:if="{{index%2 != 0}}" 
         cardImg="{{item.idenImg}}" 
         cardText="{{item.idenText}}" 
         commentNum="{{item.commentNum}}" 
         likeNum="{{item.likeNum}}"> 
      </view> 
  </view> 

< / view >
css section:
.list {width: 98%; display: flex; flex-direction: row; margin: 0 auto;}
.listItem {width: 50%; box-sizing: border-box; display: flex; flex-direction: column;}
.listItem .card {width: 100%; box-sizing: border-box; padding: 10rpx; }
this idenList is an array of cards. The length of the idenList, that is, the number of cards
, can be set to the first class to show the array elements of index%2 = = 0 in card, and the second to the contrary

.
Menu