猜你喜欢的翻页,翻页是通用的其他地方也要用,分页准备,分页加载,分页条件
滚动容器调用滚动触底再
进行父调子,模板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页就是空的了
这个时候就很浪费我们呢来优化一下
我们来看一下效果