选项卡带刷新加载 ​

<page-panel title="分类"  :fullPage="true" ref="page" :isLoading="pageLoading" > 
  <template slot="gBody"  > 
      <page-tab-list :enable="stickyEnable" tabRest :tabList="tabList" :mainHeight="mHeight" ref="tabs" :index="0" @startReq="startReq" disableTouch>
             <!-- 选项列表数据上方插槽 -->
             <view slot="other" class="flex flex-vh-center flex-between py-30 px-32"> 
                类型-1
             </view>
             <!-- 数据渲染   -->
             <template  v-slot:dataList="{data,tabIndex}">
              <!-- tab 对应列表数据 -->
               <view v-if="data && data.length>0" class="px-32">
                  <template v-for="(book,booIndex) in data"  > 
                    <book-lr-item  :book="book"  imgHeight="204" imgwidth="204" :key="book.id"></book-lr-item>
                  </template> 
               </view>
               <!-- 空数据 --> 
              <page-empty  v-else></page-empty>
             </template>   
        </page-tab-list>   
  </template> 
</page-panel> 
<script>
  export default { 
    data() {
      return {  
        tabList: [{name: '全部',id:''}, {name: '社科',id:'1403618681748156416'}, {name: '文艺',id:'1403618735858872320'}, {name: '少儿',id:'1403618775771869184'}],
        // 页面加载
        pageLoading   : true,
        // 内容主体高度
        mainHeight    : 200,   
        lastIndex:0, 
      };
    },
    onLoad() { 
      this.pageLoading = false;  
      if(this.isLogin){
        uni.showLoading({
          title:'请稍后'
        })
      } 
    },  
    onReady(){ 
      //获取内容高度
      this.getContentHeight()
    },
    methods:{
      getContentHeight(){
        this.$util.getRefs('page', this, 0, (ref)=>{ 
          ref.getDomSize('pageBody', (e)=>{ 
            // 主体高度 = 页面高度 - 自定义区域高度 tab默认的高度为 80 加上 底部滑块的高度 6 和默认的间隔 20 合计 106 rpx
            // 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
            this.mHeight = e.height - uni.upx2px(106); 
            this.initHeight() 
          });
        }); 
      }, 
      initHeight(){ 
        //去掉other插槽的高度 才是内容区域的高度
        this.mHeight=this.mHeight - uni.upx2px(110)
        // 第一次加载数据  会触发 startReq 回调
        this.$refs.tabs.init(); 
      },  
      //开始请求
      startReq(req){
        console.log('req',req);
        let {isReload,tabIndex,page}=req; 
        let data={
          currentPage:page, 
          pageSize: 10, 
          contentTypeId: this.tabList[tabIndex].id ,
          isFree: "",
          isLimitTimeFree: "" , 
        }
        //想后台请求数据
        queryList(data).then(res=>{
          let list=res.data.records||[]; 
          let isnomore=list.length<page*10
          //请求成功把数据填充tab
          this.$refs.tabs.reqFinish(req,list||[],isnomore)
          uni.hideLoading()
        }).catch(err=>{
          uni.hideLoading()
          this.$refs.tabs.onReqErr(isReload)
        }) 
      }, 
    }
  }
</script>