2023-02-21 22:34:08 +08:00

1.3 KiB
Raw Blame History

下拉刷新和上拉加载

所谓下拉刷新,就是用户按住页面不放,往下拖动,然后获取最新的信息。

所谓上拉加载,又被称之为触底加载,就是到用户滑动到底部的时候,加载更多的信息。(这个实际上就相当于以前 PC 端的分页)

准备工作

首先第一步需要将 douban 的服务器跑起来,首先需要恢复数据库

里面有一个 movies.json 的文件。

恢复命令如下:

./mongoimport -d douban -c movies --file /Users/jie/Desktop/movies.json --type json
  • -d数据库的名字
  • -c集合的名字
  • --file要恢复的 json 文件的所在路径

启动服务器

首先使用 npm i 命令安装依赖

然后使用 node app.js 命令启动豆瓣电影的服务器

下拉刷新

有一个生命周期钩子函数 onPullDownRefresh监听用户的下拉操作会在用户进行下拉的时候触发。

onPullDownRefresh(){
  console.log("用户下拉了");
}

但是此时,我们发现页面还不能够进行下拉,因为还需要在该页面对应的 json 文件中进行一个配置:

"enablePullDownRefresh":true,
"backgroundTextStyle": "dark"

上拉加载

又被称之为触底加载,同样是有一个生命周期钩子函数 onReachBottom会在页面触底时触发