微信小程序瀑布流布局

本文主要是介绍微信小程序瀑布流布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

wxml文件

<view class="container">
  <view class="left-item">
    <view class="item"></view>
  </view>
   <view class="right-item">
    <view class="item"></view>
  </view>
</view>

js文件

let leftHeight = 0, rightHeight = 0; //分别定义左右两边的高度
let query;

page({
   data:{
      list: [],    //通过接口获取的数组
      leftList:[],     //左边数组
      rightList:[],    //右边数组
   },

   //瀑布流布局
  async waterfallFlow(){      //在获取list后调用
    const {list,leftList,rightList} =this.data;
    query = wx.createSelectorQuery();
    for (const item of list) {
      leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判断两边高度，来觉得添加到那边
      await this.getBoxHeight(leftList, rightList);
     }

  },
  getBoxHeight(leftList,rightList){
    return new Promise((resolve,reject)=>{
      this.setData({ leftList, rightList });
      query.select('.left-item').boundingClientRect();
      query.select('.right-item').boundingClientRect();
      query.exec((res) => {
       leftHeight = res[0].height; //获取左边列表的高度
       rightHeight = res[1].height; //获取右边列表的高度
       resolve();
      });
    })
  },

})

样式文件根据自己项目的样式来，主要分为两列。

总结，将样式分为两列，循化数据，获取两列的高度，根据判断条件将两个数组中的每个数据放入左右数组之中

这篇关于微信小程序瀑布流布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！