
1、登录ant-design品台,输入个人账号。
2、左键点击界面,并按下键盘f4键,就可以强制刷新了。
近期的项目是使用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
下拉刷新
上滑加载更多,实现分页
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)