微信小程序瀑布流自定义组件，2种写法_微信小程序瀑布流组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_43136379/article/details/108868366

本文介绍了两种在微信小程序中实现瀑布流布局的方法：递归方式和计算图片高度方式。递归方式每次添加内容时进行比较计算，而计算高度方式则一次性预处理所有图片高度。通过示例代码展示了如何在页面和组件中应用这两种方法，确保滚动触底时加载新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码片段：‘https://developers.weixin.qq.com/s/to7eyxmv7Nuv’

第一种：递归方式，每次添加一个内容，就进行比较计算；

第二种：计算图片高度方式，一次性先计算完，然后在显示

注意滚动触底每次加载一页数据不用合并原先的数据。直接传递新加载数据就好
图示：
在这里插入图片描述

组件代码
wxml：


<scroll-view scroll-y="{
    
    {true}}" lower-threshold="{
    
    {200}}">
  <div class="activity_recommend">
      <div class="recommend_content clearfix">
          <!-- 瀑布流左边和右边 -->
          <view id="pro_l" class="pro_l">
              <view wx:for="{
    
    {productCon_l}}" wx:for-item="item" wx:for-index="ids" wx:key="item">
                    <view  class="recommend_item recom{
    
    {ids}}">
                        <navigator url="/pages/ucenter/myWorks/detail?id={
    
    {item.id}}" open-type="navigate"  hover-class='none'>
                          <image class="item-img" src="{
    
    {item.imgUrl}}" mode="widthFix"></image>
                        </navigator>
                        <block wx:if="{
    
    {isActive}}">
                            <view url="url" class="recommend_shopName">{
  
  {item.title}}</view>
                            <view wx:if="{
    
    {myCollection}}" class="recommend_shopper">
                                <view class="shopper_container">
                                    <image class="shopper_ava" src="{
    
    {item.headlogo}}"></image>
                                    <text class="shopperName">{
  
  {item.nickname}}</text>
                                </view>
                                <view class="loves_box">
                                    <view class='collect_icon'><image data-favoriteid="{
    
    {item.id}}" src="{
    
    {item.isFavorite?oncollect:collect}}" bindtap='collectGoodst'></image></view>
                                </view>
                            </view>
                            <navigator hover-class="none" url="/pages/ucenter/releaseWorks/releaseWorks?id={
    
    {item.id}}" wx:if="{
    
    {myworks}}" class="myworks">
                                <image src="{
    
    {iconedit}}" mode="widthFix"></image>
                                <text>编辑</text>
                            </navigator>
                        </block>
                  </view>
              </view>
          </view>
          <view id="pro_r" class="pro_r">
              <view wx:for="{
    
    {productCon_r}}" wx:for-item="item" wx:for-index="ids" wx:key="item">
                  <view  class="recommend_item recom{
    
    {ids}}">
                        <navigator url="/pages/ucenter/myWorks/detail?id={
    
    {item.id}}" open-type="navigate"  hover-class='none'>
                            <image class="item-img" src="{
    
    {item.imgUrl}}" mode="widthFix"></image>
                        </navigator>
                        <block wx:if="{
    
    {isActive}}">
                            <view url="url" class="recommend_shopName">{
  
  {item.title}}</view>
                            <view wx:if="{
    
    {myCollection}}" class="recommend_shopper">
                                <view class="shopper_container"