实现思路:将页面布局一分为二,分成左右两列布局,同时将数据也一分为二,分别展示在左右两个布局容器中。
瀑布流布局代码: 微信小程序简单实现两列瀑布流布局页面
效果图:
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
})
}
})