小程序瀑布流心得

遇到的问题

• 小程序提供了获取节点的api，最开始的实现思路为左右两个盒子分别渲染数组 ，从左边先开始添加一条数据随后开始判断给矮的一边的数组增加一条数据,像这样

data.forEach( item => {
  setTimeout( () => {
  const right = getNode('#right').hieght; // 右侧列表高度
  const left = getNode('#left').height; // 左侧列表高度
  const {listData}= this.data; // 左右列表数组
  if( left >= right ) {
  listData.right.push(item); // 存入右边
  return;
}
  if( left < right ) listData.left.push(item) // 存入左边
  this.setData({
  listData,
})
})
})

• 即使通过定时器将代码异步 但执行时机始终是在 wx:for的渲染之前执行

解决思路

• 不再通过循环的方式向左右数组内插入数据，使用递归 + 异步的方式去判断高度插入数据
• 代码逻辑 ：以左右两边数组长度的和作为查询接口数据数组的索引（用于向左右数组插入对应索引的数据及判断是否插入所有数据停止递归）