使用初探

一. 基础用法

1. 编写模版

点击查看源码

<template>
    <qt-waterfall ref="waterfall" class="waterfall_demo" :headBlank="90"> <!-- headBlank 距离顶部的距离-->
    </qt-waterfall>
</template>

2. 数据设置

1. 实现加载页面内容的接口onLoadPageDataAsync

点击查看源码

//mixins: [TabsInstance] 先混入TabsInstance 才可使用onLoadPageDataAsync
//切换tabs时回调 (pageIndex: 默认0 暂无实际意义,pageNum: 分页加载页码)
onLoadPageDataAsync(pageIndex, pageNum){
    let contentData = []
    //这里支持分页，可根据pageNum这个参数获取不同内容，组件内部会自行实现分页加载功能。
    if(pageNum > 1){ //停止分页 创建结束section  
        //WaterfallBuilder(瀑布流内容区域的宽度,代表格子之间的间距)
        let builder = new WaterfallBuilder(1920,36)
        //buildFinalSection(height:高度,type:默认-1001 不可更改,text：到底提示文案)
        contentData.push(builder.buildFinalSection(160,-1001,'已经到底了~~'))
    }else{
        // 这里使用buildBasicMockData方法填充一些假数据，实际情况可能需要通过网络获取，所以这里是异步方法。
        //这里的`contentData`表示在列表中存在的一个节点数据，由于瀑布流是通过一个竖向listView嵌套横向内容实现的，所以这里的contentData可能是一整行的一个版块也可能是一个单独的格子。
        //目前只支持俩层嵌套，所以一个contentData下有多个children，但是children下不会再有contentData
        contentData = buildBasicMockData()
    }
    return contentData
}

//这里的contentData可以通过WarterfallBuilder来创建
//buildBasicMockData实现：
function buildBasicMockData() {
    //WaterfallBuilder(width: 宽度, nodeGap: 间距, pageIndex: 默认值0 只能传0或者不传)
    let result = new WaterfallBuilder(1920,36)
        .appendTitle('section: 1')
        .appendFlexSection(buildMockFlexSection(1,'付费'))
        .appendTitle('section: 2')
        .appendFlexSection(buildMockFlexSection(3,'付费'))
        .output()
    return result;
    //上述section代表一个版块，是一个占满整行大块的内容区域。
    //flexSection是按照children的尺寸横向依次排列的版块。当排列超过一行时，则换行继续排列，注意flexSection中不家加入过多行数据，尽量以一屏内的内容为限。
}

二. 自定义

1. 编写模版

点击查看源码

<template>
    <qt-waterfall ref="waterfall" class="waterfall_demo" :headBlank="90"> <!-- headBlank 距离顶部的距离-->
        <!-- 自定义 item 如下 type = 1 type = 2 -->
        <custom_item :type="1" slot="item"></custom_item>
        <custom_item_2  :type="2" slot="item"></custom_item_2>
        <!-- 自定义section 代表一个版块，是一个占满整行大块的内容区域-->
        <custom_section :type="1" slot="section"/>
    </qt-waterfall>
</template>

2. 数据设置

1. 实现加载页面内容的接口onLoadPageDataAsync

点击查看源码

//mixins: [TabsInstance] 先混入TabsInstance 才可使用onLoadPageDataAsync
//切换tabs时回调 (pageIndex: 默认0 暂无实际意义,pageNum: 分页加载页码)
onLoadPageDataAsync(pageIndex, pageNum){
    let contentData = []
    //这里支持分页，可根据pageNum这个参数获取不同内容，组件内部会自行实现分页加载功能。
    if(pageNum > 1){ //停止分页 创建结束section  
        //WaterfallBuilder(瀑布流内容区域的宽度,代表格子之间的间距)
        let builder = new WaterfallBuilder(1920,36)
        //buildFinalSection(height:高度,type:默认-1001 不可更改,text：到底提示文案)
        contentData.push(builder.buildFinalSection(160,-1001,'已经到底了~~'))
    }else{
        // 这里使用buildCustomMockData方法填充一些假数据，实际情况可能需要通过网络获取，所以这里是异步方法。
        //这里的`contentData`表示在列表中存在的一个节点数据，由于瀑布流是通过一个竖向listView嵌套横向内容实现的，所以这里的contentData可能是一整行的一个版块也可能是一个单独的格子。
        //目前只支持俩层嵌套，所以一个contentData下有多个children，但是children下不会再有contentData
        contentData = buildCustomMockData()
    }
    return contentData
}

//这里的contentData可以通过WarterfallBuilder来创建
//buildBasicMockData实现：
function buildCustomMockData() {
    //WaterfallBuilder(width: 宽度, nodeGap: 间距, pageIndex: 默认值0 只能传0或者不传)
    let result = new WaterfallBuilder(1920,36)
        .appendTitle('section: 1')
        .appendFlexSection(buildMockFlexSection(2,'付费'))
        .appendTitle('section: 自定义')
        .appendSection(buildCustomSection(1,'page:'+ 0))
        .appendTitle('section: 2')
        .appendFlexSection(buildMockFlexSection(1,'付费'))
        .output()
    return result;
    //上述section代表一个版块，是一个占满整行大块的内容区域。
    //flexSection是按照children的尺寸横向依次排列的版块。当排列超过一行时，则换行继续排列，注意flexSection中不家加入过多行数据，尽量以一屏内的内容为限。
}

三. 多样化

1. 编写模版

点击查看源码

<template>
    <qt-waterfall ref="waterfall" class="waterfall_demo" :headBlank="90"> <!-- headBlank 距离顶部的距离-->
    </qt-waterfall>
</template>

2. 数据设置

1. 实现加载页面内容的接口onLoadPageDataAsync

点击查看源码

onLoadPageDataAsync(pageIndex, pageNum){
    let contentData = []
    
    if(pageNum > 1){
        let builder = new WaterfallBuilder(1920,36)
        contentData.push(builder.buildFinalSection(160,-1001,'已经到底了~~'))
    }else{
        contentData = buildVarietyMockData()
    }
    return contentData
}


function buildVarietyMockData() {
    let result = new WaterfallBuilder(1920,36)
        .appendTitle('section-nest: 一行滚动')
        .appendListSection([],true,368)
        .appendTitle('section: 1')
        .appendFlexSection(buildMockFlexSection(1,'付费'))
        .appendTitle('section-nest: 多TAB')
        .appendMultiTabSection(368 + 50 + 20)
        .output()
    return result;
}

2. 加载pendingChildren warterfall中默认实现了单个横行列表形式版块、多tab的版块，以上版块需要实现对应加载版块children的方法

点击查看源码

//buildVarietyMockData方法添加了appendListSection、appendMultiTabSection俩个版块，版块中都没有内容children，需要通过实现接口来获取版块对应数据
function onLoadChildrenAsync(type, item, location) {
    let {pageIndex, position} = location
    let children;
    switch (type) {
        case WaterfallConst.PENDING_FUNCTION_TYPE_TAB_LIST:
            children = buildMockSecondLevelTabsChildren()
            arrangeChildren4ListView(children, WaterfallConst.WATERFALL_DEV_GAP, false)
            break;
        case WaterfallConst.PENDING_FUNCTION_TYPE_SINGLE_LIST:
            children = buildMockListSectionChildren(pageIndex, position)
            arrangeChildren4ListView(children, WaterfallConst.WATERFALL_DEV_GAP, false)
            //item.children = children
            break;
        case WaterfallConst.PENDING_FUNCTION_TYPE_TAB_CONTENT:
            children = buildMockListSectionChildren()
            arrangeChildren4ListView(children, WaterfallConst.WATERFALL_DEV_GAP, false)
            break;
    }
    return children
}

//通过实现onLoadChildrenAsync接口，组件内部会在版块展示前自动调用此方法来获取并更新数据

常见问题处理

间距

点击查看源码

  //1 qt-waterfall距离顶部的距离  设置属性   :headBlank="90"
  <qt-waterfall ref="waterfall" class="waterfall_demo" :headBlank="90"></qt-waterfall>

  //2 qt-waterfall设置格子的间距 
  //2.1使用 new WaterfallBuilder(1920,itemGap)  itemGap为格子间距  注意：格子的宽度相对的调整以便于页面布局
  //2.2 亦可以在构建数据时 在onLoadPageDataAsync()return contentData[{...item}] 之前  设置contentData[{...item}]每条item的decortion {left: '',right: '',top: '',bottom: ''}的外边距并且可以设置指定位置的decoration