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

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	从个人技术学习角度和团队开发技术角度中选择你最擅长的一个相关技术，进行分析描述并总结。
其他参考文献	《构建之法》

1. 技术概述

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

2. 技术详述

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

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

代码说明：

<scroll-view class="waterfall" scroll-y="true" bindscrolltolower="onScrollToLower">
  <grid-view type="masonry" cross-axis-count="{
  {crossAxisCount}}" cross-axis-gap="{
  {crossAxisGap}}" main-axis-gap="{
  {mainAxisGap}}" style="margin-top: 10px;">
  ……
  </grid-view >
  </scroll-view>

在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