小程序实现瀑布流动态加载列表_javascript技巧_

let leftHeight = 0,   rightHeight = 0; //分别定义左右两边的高度 let query; Component({   /**    * 组件的属性列表    */   properties: {     goodsList: {       type: Array,       value: []     },     loadingShow: {       type: Boolean,       value: false     },     noInfoShow: {       type: Boolean,       value: false     }   },   /**    * 组件的初始数据    */   data: {     leftList: [],     rightList: []   },   observers: {   // 当goodsList发生变化时调用方法     'goodsList': function (goodsList) {       this.isLeft()     }   },   /**    * 组件的方法列表    */   methods: {     async isLeft() {       const {         goodsList,         leftList,         rightList       } = this.data;       query = wx.createSelectorQuery().in(this);       let list = goodsList.slice(leftList.length+rightList.length,goodsList.length)       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').boundingClientRect();           query.select('#right').boundingClientRect();                      query.exec((res) => {             leftHeight = res[0].height; //获取左边列表的高度             rightHeight = res[1].height; //获取右边列表的高度             resolve();           });         });       })     },   } })

// wxml                       

.left,.right{   float: left; } .clearfix::after {   content: ".";   clear: both;   display: block;   overflow: hidden;   font-size: 0;   height: 0; } .clearfix {   zoom: 1; }