uni-app下拉刷新、上拉页面加载数据,实现分页效果
2020-06-08 04:32
736 查看
上拉刷新需配置 pages.json
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "enablePullDownRefresh": true //哪个页面需要下拉刷新就在哪个页面配置里加上这一句话 } }template
<text class="loading-text"> {{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}} </text>script
var page = 1 export default { data() { return { dataList:[], /* 上拉刷新 */ loadingType: 0, contentText: { contentdown: "上拉显示更多", contentrefresh: "正在加载...", contentnomore: "没有更多数据了" }, } }, onLoad() { this.getListInfo(); }, /*下拉刷新*/ onPullDownRefresh: function() { this.getListInfo(); }, /*上拉刷新*/ onReachBottom:function(){ this.getMoreListInfo() }, methods: { getListInfo(){ const that = this; page =1 uni.request({ url:'http://*********', method:'POST', data:{ page:page }, success(res) { that.dataList = res.data.data.list uni.hideNavigationBarLoading(); uni.stopPullDownRefresh(); //得到数据后停止下拉刷新 } }) }, /* 上拉加载 */ getMoreListInfo(){ const that = this page++ if (that.loadingType != 0) { return false; //loadingType!=0;直接返回 } that.loadingType = 1; uni.showNavigationBarLoading(); uni.request({ url:'http://*********', method:'POST', data:{ page:page }, success(res) { if(that.dataList.length == res.data.data.count){ //当之前的数据长度等于count时跳出函数,不继续执行下面语句 that.loadingType = 2; uni.hideNavigationBarLoading();//关闭加载动画 return false; } that.dataList = that.dataList.concat(res.data.data.list) that.loadingType = 0;//将loadingType归0重置 uni.hideNavigationBarLoading();//关闭加载动画 } }) } }css
.loading-text{ height: 80upx; line-height: 80upx; font-size: 25upx; display: flex; flex-direction: row; justify-content: space-around; }
相关文章推荐
- 点击侧滑任何一个 菜单项,请求网络数据展示在主界面的xlistview中且实现下拉刷新效果和上拉加载的分页加载数据效果
- SpringMVC下删除一条数据后重新加载当前页面(已实现分页功能)
- 微信小程序实现页面下拉刷新和上拉加载
- struts+spring+hibernate用jquery实现数据分页异步加载,页面不刷新
- 实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性、网格、瀑布流效果演示
- 纯js实现分页 原理:所有数据已加载好,js通过遍历部分显示,实现分页效果
- jquery实现页面滚动到最下方自动按分页的形式加载内容效果
- MUI进行APP混合开发实现下拉刷新和上拉加载[原创]_Android_脚本之家
- SwipeRefreshLayout和RecyclerView结合实现下拉刷新和上拉加载更多的效果
- uni-app的下拉刷新和上拉加载
- SwipeRefreshLayout配合RecyclerView实现下拉刷新和上拉加载更多以及没有数据的显示
- SwipeRefreshLayout配合RecyclerView实现下拉刷新和上拉加载更多以及没有数据的显示
- 自定义ListView实现下拉刷新和分页加载(效果类似知乎)
- jquery 实现滚动条至页面底端自动加载数据效果
- Android SQLite PhoneGap sencha touch 中调用Java原生程序,数据加载到页面,并实现滑动分页
- jquery mobile关于使用iscroll动态加载数据实现下拉刷新和上拉的效果
- Android实战简易教程<二十五>(基于Baas的数据表查询下拉刷新和上拉加载实现!)
- android快速开发框架--快速实现 页面 加载中 加载失败 无数据等状态以及下拉刷新和自动加载
- mescroll-uni实现下拉刷新和上拉加载
- uni-app的下拉刷新和上拉加载