使用初探

1. 编写模版

点击查看源码

<template>
    <qt-tabs-waterfall 
        ref="tabs-waterfall" 
        class="quick-tabs-waterfall"
        class-nav-bar="tabs_waterfall_nav_bar" 
        class-content="tabs_waterfall_content"
        :page-transform="false">
        <!-- 自定义 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-tabs-waterfall>
    
</template>

2. 数据设置

1. 初始化导航栏的数据

点击查看源码

let count = 20
let navs = []
for(let i = 0; i < 10; i++){
    if(i == 0){navs.push({text:'Grid布局'})}
    else if(i == 1){navs.push({text:'普通布局'})}
    else if(i == 2){navs.push({text:'自定义'})}
    else if(i == 3){navs.push({text:'多级tab'})}
    else{navs.push({text:'TAB' + i})}
       
}
//NAV_BAR_ITEM_TYPE_DEFAULT（ 20000） 
//必须设置tab数据的type 默认值为2000   自定义tab导航时可自定义
navs[i].type = WaterfallConst.NAV_BAR_ITEM_TYPE_DEFAULT
this.$refs.tabs_waterfall.setData(navs,1,1) //初始化导航栏数据

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

点击查看源码

 //mixins: [ESPage,TabsInstance] 先在vue组件中混入TabsInstance
 // 实现loadpage接口

onLoadPageDataAsync(pageIndex, pageNum, tabItem)
{
    let pageNodes = buildMockNodes(pageIndex)  // 这里使用buildMockNodes方法填充一些假数据，实际情况可能需要通过网络获取，所以这里是异步方法。
    //这里的`node`表示在列表中存在的一个节点数据，由于瀑布流是通过一个竖向listView嵌套横向内容实现的，所以这里的node可能是一整行的一个版块也可能是一个单独的格子。
    //目前只支持俩层嵌套，所以一个node下有多个children，但是children下不会再有node
    //这里支持分页，可根据pageIndex,pageNum这俩个参数获取不同内容，组件内部会自行实现分页加载功能。
    return pageNodes
}

//这里的pageNodes可以通过WarterfallBuilder来创建
//buildMockData实现：
function buildMockData(pageIndex = 0) {

    let nodes = new WaterfallBuilder(WaterfallConst.WATERFALL_DEV_WIDTH, WaterfallConst.WATERFALL_DEV_GAP, pageIndex)
        .appendTitle('section: 1')
        .appendFlexSection(buildMockFlexSection(1,corner))
        .appendTitle('section: 2')
        .appendFlexSection(buildMockFlexSection(3,corner))
        .output()

    return nodes;
    //这里的WaterfallConst.WATERFALL_DEV_WIDTH 此参数代表瀑布流内容区域的宽度
    //WaterfallConst.WATERFALL_DEV_GAP 代表格子之间的间距
    //上述section代表一个版块，是一个占满整行大块的内容区域。
    //flexSection是按照children的尺寸横向依次排列的版块。当排列超过一行时，则换行继续排列，注意flexSection中不家加入过多行数据，尽量以一屏内的内容为限。
}

3. 加载pendingChildren(可选) qt-tabs-warterfall中默认实现了单个横行列表形式版块、多tab的版块，如果有以上版块，需要实现对应加载版块children的方法

点击查看源码

function buildMockData(pageIndex = 0) {
    let builder = new WaterfallBuilder(WaterfallConst.WATERFALL_DEV_WIDTH, WaterfallConst.WATERFALL_DEV_GAP, pageIndex)
    builder.appendMultiTabSection(368 + 50 + 20)
    builder.appendListSection([], true, 368)
    let nodes = builder.output();
    return nodes
}

//这里添加了俩个版块，版块中都没有内容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接口，组件内部会在版块展示前自动调用此方法来获取并更新数据