个人技术总结——微信小程序实现瀑布流

1. 技术概述

微信小程序中的瀑布流技术用于创建多列自适应布局，使内容展示更加灵活和丰富，适用于图片或卡片集合展示，增强视觉吸引力。学习原因包括提升用户界面设计感和交互体验。技术难点在于保证布局的响应式和性能优化，特别是在处理大量数据加载和不同屏幕尺寸适配时。

2. 技术详述

在wxml文件中，需用到以下几点实现方法：

• 使用 scroll-view 组件: 这是微信小程序提供的一个可滚动视图容器。通过设置 scroll-y=“true”，允许垂直方向的滚动。
• 使用 grid-view 组件: 这是实现瀑布流的关键组件。设置 type=“masonry” 将布局类型设置为瀑布流。
  加载更多: bindscrolltolower=“onScrollToLower” 属性绑定了滚动到底部时触发的事件处理器，通过这个事件可以实现无限滚动加载更多数据，维持瀑布流布局的同时不断填充新内容，保持用户浏览体验的连续性。

代码说明：

  
  ……
  
  

在js文件中需:

动态数据绑定与循环: 通过 循环遍历显示数据，，其中 tasks 或 timeTasks 数组存储了要展示的数据项,每个数据项（item）的高度根据其内容（如图片、文字等）动态变化，这是瀑布流布局中每个item高度不一的关键。例如，如果某item含有图片而其他item没有，那么含图片的item高度就会自然大于无图片的item。
动态计算宽度: 在 onReady 生命周期方法中，通过 wx.getSystemInfo 获取屏幕宽度，并计算每个项目应占的宽度（itemWidth），这影响列的宽度和项目的高度。

onReady() {
    var app=getApp()
    this.setData({
      number:app.globalData.number,
      nickname:app.globalData.nickname,
      avatar:app.globalData.avatar,
      tasks: [],
      timeTasks:[]
    })
      this.fetchTradeTasks();
      this.fetchRunningTasks();
      this.fetchRideTasks();
      this.fetchPostTasks();
      let that = this;
      
      // 计算
      wx.getSystemInfo({
        success: function(res) {
          // 每个item应占的宽度向上取整，限tab栏不会滑动的情况。
          let windowWidth = res.windowWidth;
          let itemWidth = Math.ceil(windowWidth / that.data.tabs.length);
          // 初始化每个项目的偏移量，存入数组
          let tempArr = [];
          for (let i in that.data.tabs) {
            tempArr.push(itemWidth * i);
          }
  
          // 32是两个字体（16px）的宽度。tab中字数不同的话需要调整...
          that.setData({
            itemWidth: itemWidth,
          });
        },
        
      });
    // }
    
  },

设置列数和间隔，

列数设置: cross-axis-count=“{{crossAxisCount}}” 设置了瀑布流的列数,在此次设计中列数被设置为2，但可以根据需要调整。
间隔设置: cross-axis-gap=“{{crossAxisGap}}” 和 main-axis-gap=“{{mainAxisGap}}” 分别设置了列之间的间隔和行之间的间隔。

代码说明：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: ["交易", "跑腿", "拼车", "帖子"],
    itemWidth: 0,
    tabIndex: 0,
    sliderLeft: 0,
    sliderOffset: 0,
    sliderOffsets: [],
    tasks: [],
    timeTasks:[],
    open: false,
    mark: 0,
    newmark: 0,
    istoright: true,
    number: "",
    nickname: "",
    avatar: [], // 选择图片
    rowGap: 10, // 行间距
    crossAxisCount: 2, // 瀑布流列数
    crossAxisGap: 8, // 瀑布流列间隔
    mainAxisGap: 8, // 瀑布流主轴间隔
    isClick:false,
    hotTasks: "font-size: 18px; font-weight: bold;",
    latestTasks:"font-size: 18px;",
    Status:true
  },

3. 技术使用中遇到的问题和解决过程

3.1. （头像）图片可能产生变形问题：

描述： 在本次小程序开发过程中，因为我们每个item展示的内容不同，所以会导致在左下方放置的头像图片被挤压成不同大小，十分影响美观。
解决办法： 为头像设计一个专用容器，让头像图片填充此容器，代替最原始的直接对头像进行的样式美化。

代码说明：

        
          < image wx:if="{{item.trade_user[0].avatar===undefined || item.trade_user[0].avatar.length === 0}}" src="../../images/avatar.png" class="trade-user-avatar" mode="aspectFill">
          < image wx:else src="{{item.trade_user[0].avatar}}" class="trade-user-avatar" mode="aspectFill">
        

.trade-user-avatar-wrap {
  width: 40px; /* 头像容器的宽度 */
  height: 40px; /* 头像容器的高度 */
  overflow: hidden; /* 隐藏超出容器部分的图片 */
  border-radius: 50%; /* 使容器成为圆形 */
  display: inline-block; /* 使容器作为内联块级元素 */
  margin-right: 10px; 
}


.trade-user-avatar {
  width: 100%; /* 图片宽度填满容器宽度 */
  height: 100%; /* 图片高度填满容器高度 */
  border-radius: 50%; /* 图片也是圆形 */
}

3.2 滚动加载更多（无限滚动）问题：

描述： 在滚动到底部时加载更多数据可能存在逻辑错误或性能问题。
解决： 实现bindscrolltolower事件处理函数，检查是否到达底部并触发数据加载，同时避免在滚动过程中频繁加载。

4. 总结

在微信小程序中实现瀑布流布局是一种提升内容展示灵活性与丰富性的有效方式，尤其适合于图片和卡片集合的美观呈现，增强了用户的视觉享受和交互体验。该技术通过结合scroll-view与自定义grid-view组件（设置type="masonry"属性）得以实现，不仅支持垂直滚动查看，还能动态调整列宽高以适应不同内容，营造流畅的瀑布流效果。为了应对屏幕尺寸多样性和性能挑战，需要精心计算每个item的宽度并合理设置列数与间隔，同时利用bindscrolltolower事件处理无限滚动加载，确保用户在浏览时内容的连续性和体验的无缝性。针对布局中可能出现的图片变形问题，通过设计专用容器控制图片大小与样式，解决了美观问题。总之，实现瀑布流布局不仅是技术实践，更是对用户体验深刻理解与持续优化的过程。通过这次经历，我更加深刻认识到，技术和设计的结合应当始终围绕着提升用户体验这一核心目标进行。