61 lines
1.3 KiB
Markdown
61 lines
1.3 KiB
Markdown
# 下拉刷新和上拉加载
|
||
|
||
|
||
|
||
所谓下拉刷新，就是用户按住页面不放，往下拖动，然后获取最新的信息。
|
||
|
||
所谓上拉加载，又被称之为触底加载，就是到用户滑动到底部的时候，加载更多的信息。（这个实际上就相当于以前 PC 端的分页）
|
||
|
||
|
||
|
||
**准备工作**
|
||
|
||
首先第一步需要将 douban 的服务器跑起来，首先需要恢复数据库
|
||
|
||
里面有一个 movies.json 的文件。
|
||
|
||
恢复命令如下：
|
||
|
||
```js
|
||
./mongoimport -d douban -c movies --file /Users/jie/Desktop/movies.json --type json
|
||
```
|
||
|
||
- -d：数据库的名字
|
||
- -c：集合的名字
|
||
- --file：要恢复的 json 文件的所在路径
|
||
|
||
|
||
|
||
**启动服务器**
|
||
|
||
首先使用 npm i 命令安装依赖
|
||
|
||
然后使用 node app.js 命令启动豆瓣电影的服务器
|
||
|
||
|
||
|
||
**下拉刷新**
|
||
|
||
有一个生命周期钩子函数 onPullDownRefresh，监听用户的下拉操作，会在用户进行下拉的时候触发。
|
||
|
||
```js
|
||
onPullDownRefresh(){
|
||
console.log("用户下拉了");
|
||
}
|
||
```
|
||
|
||
但是此时，我们发现页面还不能够进行下拉，因为还需要在该页面对应的 json 文件中进行一个配置：
|
||
|
||
```js
|
||
"enablePullDownRefresh":true,
|
||
"backgroundTextStyle": "dark"
|
||
```
|
||
|
||
|
||
|
||
**上拉加载**
|
||
|
||
又被称之为触底加载，同样是有一个生命周期钩子函数 onReachBottom，会在页面触底时触发
|
||
|
||
|