Sow nothing reap nothing

微信小程序实现两列瀑布流方式二

已有2,542次关注

实现思路:将页面布局一分为二,分成左右两列布局,同时将数据也一分为二,分别展示在左右两个布局容器中。
瀑布流布局代码: 微信小程序简单实现两列瀑布流布局页面

效果图:
微信小程序实现两列瀑布流.jpg


wxml代码:

<view class="container">
  <view class="information-module">
    <view class="information-content">
      <view class="commodity-module">
        <view class="commodity-left">
          <view class="commodity-item" wx:for="{{productListLeft}}" wx:key="index">
            <image class="info-pic" src="{{item.image}}"></image>
            <text class="info-title">{{item.name}}</text>
          </view>
        </view>
        <view class="commodity-right">
          <view class="commodity-item" wx:for="{{productListRight}}" wx:key="index">
            <image class="info-pic" src="{{item.image}}"></image>
            <text class="info-title">{{item.name}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

wxss代码:

.container{width:100%;min-height:100vh;background-color:rgba(238,239,241,1)}
.information-module{width: 100%;}
.information-content{width: 95%; margin: 0rpx auto; padding: 0 0 20rpx 0}
.commodity-module{column-gap: 10rpx;column-count: 2;}
.commodity-left,.commodity-right{break-inside: avoid;}
.commodity-item{margin: 0 0 10rpx 0;background-color: #fff;border-radius: 10rpx;padding: 0 0 20rpx 0;}
.commodity-item .info-pic{width: 100%; height: 350rpx;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;}
.commodity-item .info-title{font-size: 26rpx;text-align: justify;padding: 0 10rpx;overflow:hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

js代码:

Page({

  //页面的初始数据
  data: {
    mockData:[
      {"image":"1.png","name":"1妇科综合体检298元全款代金券妇科综合体检298元全款代金券"},
      {"image":"1.png","name":"2妇科综合体检298元全款代金券"},
      {"image":"1.png","name":"3妇科综合体检298元全款代金券妇科综合体检298元全款代金券"},
      {"image":"1.png","name":"4妇科综合体检298元全款代金券"},
      {"image":"1.png","name":"5妇科综合体检298元全款代金券"},
      {"image":"1.png","name":"6妇科综合体检298元全款代金券妇科综合体检298元全款代金券"},
      {"image":"1.png","name":"7妇科综合体检298元全款代金券"},
      {"image":"1.png","name":"8妇科综合体检298元全款代金券298元全款代金券"},
  ],
    productListLeft:  [],
    productListRight:  []
  },

  //生命周期函数--监听页面加载
  onLoad: function (options) {
    let datasArr = this.data.mockData;
    let proListLeft = [];
    let proListRight = [];
    //数据处理
    for(let i = 0; i < datasArr.length; i++){
      if(i % 2){
        proListRight.push(datasArr[i]);
      }else{
        proListLeft.push(datasArr[i]);
      }
    }
    this.setData({
      productListLeft: proListLeft,
      productListRight: proListRight
    })
  }
})

已自动关闭评论