猜你喜欢的翻页，翻页是通用的其他地方也要用，分页准备，分页加载，分页条件

 滚动容器调用滚动触底再

进行父调子，模板ref（父）-》组件实例类型

               暴露方法（子）

 

 我们先测试下效果

 在触底的时候我们要调用<XTxGuess />内部中的方法

 这里ref是不安全的我们要进行类型定义

 最后进行方法暴露和调用

 

 现在开始分页加载了

 

 

通用分页参数类型如下，存放到 `src/types/global.d.ts` 文件：

```ts
/** 通用分页参数类型 */
export type PageParams = {
  /** 页码：默认值为 1 */
  page?: number
  /** 页大小：默认值为 10 */
  pageSize?: number
}

问号是可选的意思

 

 

 下面进行数组追加和页码累加，这里要注意的是push（）括号里面要展开写用到...

第二个注意页码追加的page 我们是可选的但是对于++来说如果没有既none我们无法++.因此我们把这个page 改成必选，也就是如图的Required

 到这里为止我们测试的时候就可以加载下一页了

分页条件

我们加入后来只有35页信息

那么当我们翻到36页就是空的了

这个时候就很浪费我们呢来优化一下

 

 

 我们来看一下效果