在小程序的配置文件 app.json 里的 window 配置选项里面，之前我们已经把 enablePullDownRefresh 的值设置成了 true ，表示启动页面的下拉刷新功能 ..

具体在页面上下拉刷新要做的事，可以放在页面的 onPullDownRefresh 这个函数里面去做 .. 打开 index 这个页面 .. 添加一个 onPullDownRefresh 函数 ..

先简单的在控制台上输出一个 页面下拉刷新 .. 在真正应用的时候，你可能需要在这里去到后端服务那里拉取最新的数据，然后把更新之后数据再放到页面的数据里 .. 这样视图会重新渲染，显示更新之后的数据 ..

滚动到页面的底部以后，会执行 onReachBottom .. 添加一个 onReachBottom ... 输出一个 页面到底儿了 ...

在滚动页面的时候，会执行 onPageScroll .. 这个方法有个对象参数，这里我们可以叫它 calculations .. 在控制台上输出这个 calculations ..

下面可以在页面上添加一张图片 .. 打开这个 github 仓库 .. ninghao-images .. weixin .. app .. 把这里的 landscape.png 下载到我们的项目里 .. 放在 assets 下面 .. 新建一个目录 .. 名字是 images .. 然后把下载的图像放到这个目录的下面 ..

打开 index 页面的视图文件 .. 先添加一个 view 组件 .. 里面包装一个 image ，它可以显示图像 .. 添加一个 src 属性，指定一下要显示的图像的位置 .. /assets/images/landscape.png ..

在这个 view 组件上面添加一个类 .. 名字是 image ..

再打开小程序的样式文件 .. 添加一个 .image > image .. 设置一下 image 这个类的 image 这个子组件的样式 .. 把 width 设置成 100% ..

这个 container 样式也可以再修改一下 .. 把 height 的值设置成 80vh ..

预览

下面可以到微信的开发者工具去预览一下 ... 先向下拉动页面 ... 会触发执行页面的 onPullDownRefresh .. 在控制台上输出了一个 下拉刷新页面 ..

然后向下滚动页面 ..

这样会执行页面的 onPageScroll ... 这个函数的参数是个对象 .. 它里面有个 scrollTop .. 它表示就是页面垂直已经滚动的距离 .. 这个值的单位是 px .. 就是像素 ..

滚动到页面最底部的时候，执行了页面上的 onReachBottom .. 在控制台上会输出一个 页面到底儿了 ..

下面我们可以再把添加在 index 页面上的这个图像 .. 放到 event 页面上 ...

再回到开发者工具，可以预览一下 ..