上拉加载
在需要实现该功能的页面写入 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()
},