uniapp(5)滚动列表scroll-view

html 复制代码
	<scroll-view scroll-y @refresherrefresh='getFresh' 
@scrolltolower="lowerBottom" @scroll="scroll" 
				style="height:52vh;border-radius:
 10rpx;padding-top: 24rpx;">
				<view class="flex_center" >
				<view class="cententCard pd32 mgb16 radius20" 
style="width: 100%;" v-for="(item,index) in taskList"
					:key="index" @click="gotoTaskDetail(item)">
					<view class="taskTitle flex_left_row mgb16">
<view class="flex_left_row" style="margin-top: 10rpx;">
				<text class="fs24 mgr16 bgtext1 radius8 text1">
                        {{item.text1}}
                </text>
				<text class="fs24 bgtext2 radius8 text2">{{item.text2}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			</scroll-view>

scroll-view | uni-app官网

|----------------|-------------|---|-------------------------------|
| @scrolltoupper | EventHandle | | 滚动到顶部/左边,会触发 scrolltoupper 事件 |

|---------|-------------|---|-----------------------------------------------------------------------------------------|
| @scroll | EventHandle | | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |

使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;

1、触底加载下一页

进入页面默认进行数据加载,加载的列表数据为taskList数组,根据后端返回一次10条进行加载

触底触发@scrolltolower="lowerBottom"

这个时候需要进行第一次判断

后端返回的数据是否满足约定的10条,或者page*limit<total的判断

获取到的数组存在addList数组中,push到taskList中

如果没有加载到全部数据,触底时候继续触发

如果满足就提示已经没有更多数据了

javascript 复制代码
			lowerBottom() { //触底事件
			console.log("触底");
			console.log(this.addList);
				 if (this.addList.length < 10) {
					uni.showToast({
						title: `没有更多数据了`,
						icon: 'none',
						duration: 2000
					})
				} else {
					this.page++
					this.getplanList()
				}
			},
			getplanList(){
				// 获取接口最新list数据
				// 模拟接口请求
				let listMock=[
					{
						contentID: '2904398015',
						planStatusStr: 'hahahha',
						text1: '线上',
						text2: '月结',
						info: "1.具备良好的物品识别和分类能,
						money: '300'
					}
				]
                this.addList=listMock;
				this.taskList.push(...listMock)
				
			}
相关推荐
GIS阵地1 小时前
QgsSingleBandPseudoColorRenderer 完整详解(QGIS 3.40.13 C++)
开发语言·前端·c++·qt·qgis
刘较瘦_2 小时前
AI 开发中的 Git Submodule 父子仓库模式:前后端分仓管理与协作实践
前端·github
牧艺2 小时前
cos-design WeatherBackground:用 Canvas 做一个「会变天」的背景引擎
前端·canvas·视觉设计
OpenTiny社区2 小时前
深度解析 LSP 如何为 AI 装上“眼睛”
前端·ai编程
布列瑟农的星空2 小时前
流程类SVG画布的通用开发范式
前端
fsssb2 小时前
Chromium 源码学习笔记(七):那些跨进程的调用,底下都是同一个东西——Mojo
前端
gis开发之家2 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
MichaelJohn3 小时前
从零星白屏到“启发式缓存”,记录一次刚接手屎山的惊险排查
前端
程序员黑豆3 小时前
鸿蒙应用开发:6种图片加载方式详解
前端·华为·harmonyos
半个落月3 小时前
用 React 搭一个 WebGPU 模型加载页:从状态驱动到可复用进度条
前端·react.js