QuickTVUI

Appearance

分页 ​

1. 分页模板 ​

点击查看源码
html

<template>
    <qt-grid-view class="grid_view" ref="grid_view" :spanCount="5" :areaWidth="1920" :padding="'0,0,30,20'"
        @item-bind="onItemBind" :loadMore="loadMore" :openPage='true' :pageSize="10" :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-grid-view>
</template>

2. 分页注意事项 ​

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

pageSize 分页每页条数（当不确定每页条数时可以不设置）建议分页时必传

loading type必须设置为1002,loading必须以具名插槽slot="loading"形式添加

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

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

3. 分页通用处理数据 ​

点击查看源码
javascript

  loadMore(pageNo){ //开启分页回调  直接在该方法中根据返回的页码处理数据 (pageNo 页码) 详情查看quicktvui文档
    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.grid_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.grid_view.init(data)
      })
    }
  },