小程序实现网格布局

目录

效果展示

实现方法

wxml代码:

<view class="container">
  <view class="itemContainer">
    <image mode="widthFix" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3133636518,813509708&fm=15&gp=0.jpg"></image>
    <view class="floatContainer">
      <view class="title">我是标题</view>
      <view class="desc">我是描述</view>
    </view>
  </view>
  
  <view class="itemContainer">
    <image mode="widthFix" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4288129759,1001696633&fm=15&gp=0.jpg"></image>
    <view class="floatContainer">
      <view class="title">我是标题</view>
      <view class="desc">我是描述</view>
    </view>
  </view>

  <view class="itemContainer">
    <image mode="widthFix" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2534532045,1585036937&fm=15&gp=0.jpg"></image>
    <view class="floatContainer">
      <view class="title">我是标题</view>
      <view class="desc">我是描述</view>
    </view>
  </view>
</view>

wxss代码:

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;/*换行，不然的话会挤在一行*/
  justify-content: space-between;/*每行各元素之间剩余空间平均分割*/
  padding: 20rpx;
  width: 100%;
}
.itemContainer{
  position: relative;
  width: 49%;
  margin-top: 10rpx;
}
.itemContainer image{
  width: 100%;
  display: block;/*block可以去掉图片之间的上下间隔*/
}
.floatContainer{
  width: 100%;
  position: absolute;/*让遮罩悬浮在图片上方的关键*/
  top: 0;
  background-color: black;
  display: flex;
  flex-direction: column;/*按列排列*/
  justify-content: center;/*内容垂直居中*/
  opacity: 0.5;
  height: 100%;
  text-align: center;/*文字水平居中*/
}
.title{
  color: white;
  font-size: 40rpx;
}
.desc{
  margin-top: 10rpx;
  color: white;
  font-size: 25rpx;
}