uniapp移动端实现上拉加载（分页），下拉刷新

分页），下拉刷新"/>

uniapp移动端实现上拉加载（分页），下拉刷新

上拉加载

在需要实现该功能的页面写入 onReachBottom（）方法函数，该方法与 onLoad() 方法同级，需在在data中声明 pageNo和pageSize以及总条数，具体代码如下：

html 部分

<-- html部分  引入uview 使用uview加载效果 --><div v-if="loading" style='display: flex;justify-content: center;margin-top: 50rpx;'><u-loading-icon></u-loading-icon></div>

javascript 部分

data() {return {				loading: true,//页码pageNo: 1,//页容量pageSize: 10,//总条数total: 0,List:[]}},onLoad() {  },// 上拉加载数据onReachBottom() {//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕if (this.pageNo * this.pageSize >= this.total){uni.$u.toast('数据加载完毕')return}//并且让页码+1,调用获取数据的方法获取第二页数据this.pageNo++//此处调用自己获取数据列表的方法this.Getlist()},methods: {// 获取数据列表Getlist() {//设置加载效果this.loading = true//调起接口 将页码入参Api({params: {pageNo: this.pageNo,pageSize: this.pageSize}}).then(res => {//如果获取数据成功 将数据赋值给事先声明的数组if (res.success) {this.List = res.result.records//判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据if (res.result.pages != 1) {this.List = this.List.concat(res.result.records)} else {this.List = res.result.records}//将获取的总条数赋值this.total = res.result.total}this.loading = false})},}

遇到的问题

屏幕上滑onReachBottom不触发

解决

如果你在使用 onReachBottom 的时候没有触发，就看看那个页面有没有出现滚动条，没有就不会触发
因为 view 没有高度（百分百也不行），然后就调用不到 onReachBottom 这个钩子

page {height: initial;overflow-y: initial;min-height: 100vh;}

其实配不配置 onReachBottomDistance 都没关系的（个人觉得）

initial 关键字用于设置 CSS 属性为它的默认值

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性
官网
initial
参考原文

下拉刷新

打开项目根目录中的 pages.json 配置文件，在需要开始下拉刷新功能的页面路径下添加 或者在 globalStyle 中全局添加 enablePullDownRefresh 为true，开始下拉刷新。代码如下：
某个页面开启：

{"path": "pages/views/index","style": {"navigationBarTextStyle": "white","navigationBarBackgroundColor": "#6495ed","navigationBarTitleText": "首页","enablePullDownRefresh": true}},

全局开启：

"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","enablePullDownRefresh": true,}},

同样，在与 onLoad() 方法同级处添加以下代码：

// 下拉刷新onPullDownRefresh() {console.log('刷新')//下拉之后 重新调用获取数据的方法this.Getlist()//获取之后 一定要 调用uni.startPullDownRefresh（） 停止刷新！！！否则将会一直处于刷新状态			uni.startPullDownRefresh()},

参考原文