uniapp 上拉加载

先创建一个 scroll-view 标签 在标签中设置 滚动方向 scroll-y 就值上下滚动
scroll-x 就是左右滚动
在这里插入图片描述
然后设置高度 这个高度等于 屏幕高度 减 头部标题的高度
这里有两中获取的方法 一中是js动态获取
// 高度自适应
uni.getSystemInfo({
success: (res) => {
console.log(‘res:’, res)
let height = res.windowHeight - uni.upx2px(100);
this.swiperheight = height;
}
})
// 此处的100 就是分段器占用的高度

一种是css 获取
这里使用css 获取
使用 calc ( 100vh - 占用的固定高度) 100vh 就相当于 高度的100%
在微信小程序地图上有用到类似 100vh 让地图铺满
在这里插入图片描述
然后绑定一个滚动条事件
在这里插入图片描述
uniapp 和小程序都有封装好的触底事件 生命周期函数 这里因为用的是scroll-view 标签的原因

然后在methods 写上对应的事件函数
uniapp 上拉加载_第1张图片
然后修改请求条件
在这里插入图片描述
根据后端数据也有是只有页面和请求数据没有跳过 那就修改页面++

将请求用函数封装一下方便调用
在这里插入图片描述
然后直接调用
在这里插入图片描述
接下来就是进行数据拼接 直接修改 请求响应的数据进行拼接
这里是用数据展开的方式进行拼接
在这里插入图片描述
也可使用concat 进行数据拼接

然后判断是否还有下一页数据
uniapp 上拉加载_第2张图片
若后台没有给显示状态 还可以根据数据的数量是否小于现有页码数量进行判断

你可能感兴趣的:(个人笔记,vue,小程序)