react ＋ antd-mobile 的listview 在h5移动网页端的下拉刷新和上滑加载的实现

近期的项目是使用react＋antd-mobile的h5移动网页端的一个程序，其中一个功能是一个展示列表，具有下拉刷新和上滑加载更多的一个功能，下面就介绍一下这个功能的具体实现；

首先这里我用了antd-mobile的listView和RefreshControl的组件，想了解更多的可以去官网看看 https://mobile.ant.design/docs/react/introduce-cn

（PS：我当时用这个组件的时候，API还没有这么完善，大部分都是去react-native的官方文档中查看的，等我做完了再来看官网就几本跟新的差不多了，也是一把辛酸泪呀～～～～看来官网的维护还是很好的）

这里说一下，如果你要用到RefreshControl的一些监听事件的话，最好吧antd-mobile版本更新一下（最少更新到1.6.1以上），低版本的不支持它的一些监听事件，会报错，如：Uncaught TypeError: this.refs.lv.getInnerViewNode is not a function，版本更新一下就好了。

https://github.com/ant-design/ant-design-mobile/issues/1723

还有个比较重要的是listView的dataSource属性的参数问题需要注意一下，可以参考 https://reactnative.cn/docs/0.26/listviewdatasource.html

接下来就看一下具体的实现过程：

首先引入用到的组件

import { RefreshControl, ListView, Toast, List } from 'antd-mobile'

使用ListView，在ListView中使用RefreshControl

下拉刷新

上滑加载更多，实现分页

除了在js页面编写响应的逻辑之外，还需要再相应页面的json中写入以下配置，这个配置允许这个页面进行下拉刷新动作

特别需要注意的是：

此外，除了下拉刷新，有时候可能是在某个事件进行时触发刷新动作，此时可以调用wx.startPullDownRefresh(Object object) 此api的作用是：“ 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

转自： https://www.cnblogs.com/xunxian/p/12862660.html

官方文档： https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

只需要关闭当前页面的下拉刷新功能，只要在当前页面的json文件中配置：

！！！注意：值为布尔类型，不是字符串类型。

---