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

 滚动容器调用滚动触底再

进行父调子,模板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页就是空的了

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

 

 

 我们来看一下效果

 

posted @ 2024-01-31 13:21  艾鑫4646  阅读(3)  评论(0编辑  收藏  举报