瀑布流布局列表"/>
小程序瀑布流布局列表
小程序瀑布流布局列表
单纯的css3来实现瀑布流布局,但是有很多局限性,比如价格的升序降序等~
还希望各位多多指教撒~
/*wxml*/
<view class="list"><view class='list-half'><view wx:for="{{listData}}" wx:key="index" wx:if="{{index%2 == 0}}" class='card'></view></view><view class='list-half'><view wx:for="{{listData}}" wx:key="index" wx:if="{{index%2 != 0}}" class='card'></view></view>
</view>
.list {padding: 20rpx;display: flex;justify-content: space-between;align-items: flex-start;
}.list .list-half {width: 346rpx;box-sizing: border-box;
}
.list-half .card {background-color: #fff;border-radius: 20rpx;overflow: hidden;margin-bottom: 30rpx;padding-bottom: 20rpx;
}
更多推荐
小程序瀑布流布局列表
发布评论