list-waterfall 组件实战分享，含代码

不多说直接上完整代码看效果，关键点都有注释，觉得有用的点个赞

核心组件 list-waterfall

<template>  
  <list class="scroll" :id="pageId" fix-freezing>  
    <slot name="refresh"></slot>  
    <cell ref="head">  
      <slot name="header"></slot>  
    </cell>  
    <cell :style="{ height: pageHeight }" @appear="setEffects">  
      <slot name="sticky"></slot>  
      <waterfall  
        ref="waterfall"  
        class="scroll"  
        fix-freezing  
        :bounce="false"  
        :show-scrollbar="false"  
        :left-gap="gap32"  
        :right-gap="gap32"  
        :column-gap="gap24"  
        :column-width="colWidth"  
        :column-count="colCount"  
        v-bind="$attrs"  
      >  
        <slot name="default"></slot>  
        <slot name="footer"></slot>  
      </waterfall>  
    </cell>  
  </list>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      pageId: `page-id-${Date.now()}`,  
      headHeight: null,  
      pageHeight: null,  
      gap32: uni.upx2px(32),  
      gap24: uni.upx2px(24),  
      colWidth: uni.upx2px(331),  
      colCount: 2,  
    }  
  },  
  async mounted() {  
    const sys = uni.getSystemInfoSync()  
    const rect = await getComponentRect(this.$refs.head)  
    this.headHeight = rect.height  
    this.pageHeight = sys.windowHeight - rect.top  
    this.setEffects()  
  },  
  methods: {  
    async setEffects() {  
      const id = this.pageId  
      const headerHeight = Math.round(this.headHeight)  
      await this.$nextTick()  
      this.$refs.waterfall.setSpecialEffects({ id, headerHeight })  
    },  
  },  
}  

const dom = weex.requireModule('dom')  

function getComponentRect(ref) {  
  return new Promise((resolve, reject) => {  
    dom.getComponentRect(ref, res => {  
      return res.result ? resolve(res.size) : reject(res.result)  
    })  
  })  
}  
</script>  

<style lang="scss" scoped>  
.scroll {  
  position: relative;  
  flex: 1;  
  width: 750rpx;  
}  
</style>

业务使用

<template>  
  <list-waterfall class="page">  
    <template v-slot:header>  
      <view class="header" />  
    </template>  
    <template v-slot:sticky>  
      <view class="sticky" />  
    </template>  
    <cell v-for="idx in 20" :key="idx">  
      <text class="cell">{{ idx }}</text>  
    </cell>  
    <template v-slot:footer>  
      <text class="footer">没有更多内容啦</text>  
    </template>  
  </list-waterfall>  
</template>  

<script>  
import ListWaterfall from './list-waterfall.vue'  

export default {  
  components: {  
    ListWaterfall,  
  },  
}  
</script>  

<style lang="scss" scoped>  
.page {  
  background: #f6f8f9;  
}  

.header {  
  height: 600rpx;  
  background: rgba(green, 0.1);  
}  

.sticky {  
  height: 88rpx;  
  background: rgba(blue, 0.1);  
}  

.cell {  
  margin-top: 24rpx;  
  width: 331rpx;  
  height: 331rpx;  
  border-radius: 20rpx;  
  background: white;  
  // 文字样式  
  color: #333;  
  font-size: 28rpx;  
  line-height: 331rpx;  
  text-align: center;  
}  

.footer {  
  padding-top: 24rpx;  
  padding-bottom: 24rpx;  
  // 文字样式  
  color: #999;  
  font-size: 24rpx;  
  line-height: 36rpx;  
  text-align: center;  
}  
</style>