分页

1. 分页模板

点击查看源码

<template>
    <qt-list-view class="list_view" ref="list_view" :padding="'0,0,30,20'" 
        @item-bind="onItemBind" :loadMore="loadMore" :openPage='true' :listenBoundEvent="true">
        <!-- item -->
        <qt-poster :type="1"/>
        <!-- 分页样式 type必须为"1002" 开启分页必须添加loading html片段-->
        <div class="loading" type="1002" name="loading" ref="loading" :focusable="false" slot="loading">
          <qt-loading-view color="#409eff" style="height: 30px;width: 30px;" :focusable="false"/>
        </div>
   </qt-list-view>
</template>

2. 分页注意事项

listenBoundEvent属性必须设置为true @item-bind方法必须添加 可以不做任何处理 openPage属性值为true

qt-list-view 嵌套时，分页仅支持最外层

loading type必须设置为1002

this.$refs.list_view.stopPage() 分页结束后调用该方法停止分页

分页结束后重新开启分页可v-if刷新组件 或者this.$refs.list_view.isStopPage = false(不建议使用)

3. 分页通用处理数据

点击查看源码

   loadMore(pageNo){ //开启分页回调  直接在该方法中根据返回的页码处理数据 (pageNo 页码)
        let data = []
        if(this.listDataRec){
        id = this.listDataRec.length
        for (let i = 0; i < 12; i++) {
            let imgSrc = 'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
            let item = PosterBuilder.buildBottomTitleItem(imgSrc, '标题', 260, 320, 1)
            item.decoration = {top: 20,bottom: 60,left:25}
            data.push(item)
        }
        if(pageNo > 4){ //如果分页请求完毕 调用 stopPage 方法
            this.$refs.list_view.stopPage()
        }else{
            this.listDataRec.push(...data) || this.listDataRec.concat(data)
        }
        }else{ // 第一次初始化
        for (let i = 0; i < 12; i++) {
            let imgSrc = 'https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
            let item = PosterBuilder.buildBottomTitleItem(imgSrc, '标题', 260, 320, 1)
            item.decoration = {top: 20,bottom: 60,left:25}
            data.push(item)
        }
        this.$nextTick(() => {
            this.listDataRec = this.$refs.list_view.init(data)
        })
        }
    },