小程序学习笔记6--小程序列表页面

一、前期准备

1、监听用户下拉动作

在页面js文件中，通过onPullDownRefresh()函数可以监听页面下拉刷新事件。启用下拉刷新开始的方式有 2 种：

1. 全局开启下拉刷新：在app.json的window节点中，将enablePullDownRefresh设置为true
2. 局部开启下拉刷新：在页面的.json文件中，将enablePullDownRefresh设置为true（推荐）

ps：当处理完下拉刷新后，下拉刷新的loading效果会一直显示，不会主消失，所以需要手动隐藏loading效果。可以通过调用wx.stopPullDownRefresh()停止页面的loading效果

2、监听页面的上拉触底事件

在页面.js文件中，通过onReachBottom()函数即可监听当前页面的上拉触底事件。
可以在全局或页面的json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离

二、展示页面列表

1、第一步：初始化从父组件数据，并给标题改名

2、第二步：初始化分页数据

3、第三步：整理小程序页面样式

4、第四步：给列表页面加上loading

可以用wx.showLoading(object)开启loading 和 wx.hideLoading()关闭loading

5、第五步：页面上拉触底事件的处理列表加载下一页

6、第六步：对页面上拉触底事件进行节流处理

7、第七步：判断所有数据是否加载完成

当页码值*每页显示多少条数据>=总数据条数则表面没有下一页数据了，此时可以用wx.showToast(object)做出提示弹框，如下：

8、第八步：上拉时刷新页面

9、第九步：关闭上拉刷新