需求：两列瀑布流。其中的卡片中内容有图片、文字内容、投票，这三项中并非共存的，有投票优先显示投票、其次有图显示图，没有显示文字。有图片，就会涉及图片高度计算的问题。

思路：分左右两个数组。遍历全部的数组，将其放入左右两个数组高度之和小的那一侧。

难点：由于图片宽固定，高度加载后重新计算(加载后没等重新计算图片高度，就已经遍历推入左侧或右侧了)，导致左右高度之和计算不准确 。

难点解决： 使用 async/await 等待图片加载完计算高度后，再推入左侧或右侧

一、微信小程序代码

代码主体是参考网上的，但是具体的网址找不到了，我是在那个基础上改的，因为原来的代码存在图片高度计算问题，图片高度还没算完，就push进数组了，高度不对，导致瀑布流左/右过长，或顺序不对的问题。

<!-- 瀑布流基本机构 -->
  <view class="waterfall "> 
    <view class="leftfall" id="leftfall">
      <view wx:for="{{ leftList }}" wx:key="index" class="waterfall-item" bindtap="gotip">
        <!--卡片组件内， 在图片上，加style="{{item.picHeight}}"-->
      </view>
    </view>
    <view class="rightfall" id="rightfall">
      <view wx:for="{{ rightList }}" wx:key="index" class="waterfall-item" bindtap="gotip">
        <!--卡片组件内， 在图片上，加style="{{item.picHeight}}"-->
      </view>
    </view>
  </view>

/*css*/
.waterfall{
  padding:20rpx;
  background:#f2f2f5;
  overflow: hidden;
  position: relative;
}
.leftfall{
  margin-right:10rpx;
}
.leftfall, .rightfall{
  float: left;
  width:calc((100% - 10rpx)/2);
}

let leftHeight = 0, rightHeight = 0; //分别定义左右两边的高度
data:{
    list:[],          //  瀑布流所有数据
    leftList:[],      //  瀑布流左侧数据
    rightList:[],     //  瀑布流右侧数据
},
methods:{
    // 判断左右两边高度，然后添加到短的那边
    async isLeft() {
    let { leftList, rightList } = this.data;
    leftHeight = 0;
    rightHeight =0;
    query = this.createSelectorQuery();

    for(let i=0; i<this.data.list.length; i++){
      let item = this.data.list[i];
      await this.handleHeight(item).then(result=>{ 
        let arritem = 'list['+ i +'].picHeight';
        this.setData({
          [arritem]:result 
        })        
      })
      leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); 
      await this.getBoxHeight(leftList, rightList);
      }
    this.setData({
      isLoading: false
    })
   }, 
   //获取左右两边高度
   getBoxHeight(leftList, rightList) {
    return new Promise((resolve, reject) => {
      this.setData({ leftList, rightList }, () => {
            query.selectAll('#leftfall, #rightfall').boundingClientRect();
            query.exec((res) => {
             leftHeight = res[0][0].height; //获取左边列表的高度
             rightHeight = res[0][1].height; //获取右边列表的高度
             resolve(); 
            });
      })
    })
   },
   // 计算图片高度
   handleHeight(item){
   		// 处理图片高度，然后返回高度
   		//  ...
   		return  picH;
   }
}

最后

以上就是神勇故事为你收集整理的微信小程序瀑布流一、微信小程序代码的全部内容，希望文章能够帮你解决微信小程序瀑布流一、微信小程序代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。