小程序模板网

微信小程序 瀑布流布局

今天做小程序的时候,碰到一个比较常见的需求,就是要瀑布流布局,两列,交错分布,大概如下图

最终要实现的结果就是如左图所示。

不过在微信小程序里面,不能通过JavaScript来直接操作dome,所以一些常用的方法在这里都没有办法用了。这让笔者非常着急,因为项目比较赶,不能因为这种低级的布局问题拖慢了进度。

百度了半天,发现了css3的column这个属性,但是最后实现出来的方法就如右图所示,这不符合需求,需求是两列,从左到右进行排列的,大概就像小红书APP那种瀑布流布局

最后笔者终于找到一种非常诡异的方法,哈哈,废话不多说,直接上代码

 

				
  1. <view class="content">
  2. <view class="left">
  3. <block wx:for="{{note}}" wx:key="">
  4. <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
  5. </block>
  6. </view>
  7. <view class="right">
  8. <block wx:for="{{note}}" wx:key="">
  9. <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template>
  10. </block>
  11. </view>
  12. </view>》
  13. <!-- 下面是一个模块 -->
  14. <template name="item">
  15. <view class="item">
  16. <image class="item-img" src="{{url}}" mode="widthFix"></image>
  17. <view class="item-title-box">
  18. <navigator url="url" class="item-title">{{title}}</navigator>
  19. <image class="arrow" src="../../image/arrow.png"></image>
  20. </view>
  21. <view class="name">
  22. <image class="item-ava" src="{{avatar}}"></image>
  23. <text class="name-title">{{name}}</text>
  24. <view class="heart_">
  25. <image class="heart" src="../../image/heart.png"></image>
  26. <text>{{heart_num}}</text>
  27. </view>
  28. </view>
  29. </view>
  30.  
  31. </template>

CSS样式

 

				
  1. .content{
  2. margin: 0 20rpx;
  3. text-align: justify;
  4. }
  5. .item{
  6. background-color: #fff;
  7. margin: 1%;
  8. margin-bottom: 20rpx;
  9. display: inline-block;
  10. }
  11. .item-ava{
  12. width: 40rpx;
  13. height: 40rpx;
  14. border-radius: 20rpx;
  15. }
  16. .heart{
  17. width: 30rpx;
  18. height: 26rpx;
  19. margin-right: 8rpx;
  20. }
  21. .heart_


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23883.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询