#插件讨论# 【 nvue vue上下拉刷新(单列表 瀑布流) - lishanjun 】项目nvue实现瀑布流关键代码

该项目nvue实现瀑布流关键代码：

<waterfall :style="[getListStyle]" :column-count="4">  
            <refresh :display="refreshing ? 'show' : 'hide'" >  
                <image></image>  
                <text>1</text>  
              </refresh>  

        <slot></slot>  

        <loading v-if="startLoadMore" :display="'show'">  
            <text>1</text>  
        </loading>  

    </waterfall>

<script>  
    export default {  
        props: {  
            topUnit: {  
                type: String,  
                default: 'rpx'  
            },  
            top: {  
                type: Number,  
                default: 0  
            },  
            bottom: {  
                type: Number,  
                default: 0  
            },  
            bottomUnit: {  
                type: String,  
                default: 'rpx'  
            },  
            aboutUnit: {  
                type: String,  
                default: 'rpx'  
            },  
            left: {  
                type: Number,  
                default: 0  
            },  
            right: {  
                type: Number,  
                default: 0  
            },  
            backgroundColor: {  
                type: String,  
                default: '#f2f2f2'  
            },  
            position: {  
                type: String,  
                default: 'fixed'  
            },  
        },  
      },  
        computed: {  
            getListStyle() {  
                return {  
                    top: this.top + (this.unit || this.topUnit),  
                    left: this.left + (this.unit || this.aboutUnit),  
                    right: this.right + (this.unit || this.aboutUnit),  
                    bottom: this.bottom + (this.unit || this.bottomUnit),  
                    backgroundColor: this.backgroundColor,  
                    position: this.position,  
                    zIndex: 1,  
                    overflowAnchor: 'auto'  
                }  
            }  
        },  
}  
</script>