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)
				
			}
相关推荐
Jmyd01232 小时前
Web端3D营销展厅技术实现路径:从素材上云到线索回流的数据链路
前端·3d·性能优化·三维数字化
半个落月2 小时前
LangChain Agent 中间件实战(上):生命周期、状态、短路与工具包
javascript·langchain
砚凝霜2 小时前
【软考信息安全】第二十二章 Web服务器安全分析与增强——Apache与IIS
服务器·前端·安全
半个落月2 小时前
LangChain Agent 中间件实战(下):DeepAgents文件权限、长期记忆与对话摘要
javascript·langchain
u0111026754 小时前
JPG、PNG、WebP 怎么选?按透明度、体积和使用场景做判断
前端·javascript·vue.js·图像处理·ai作画
jerrywus4 小时前
让 AI 写完代码后交一份报告:我改造了 answer-me-with-html
前端·claude·cursor
派小心.5 小时前
小程序分享链路中来源参数的传递校验
大数据·前端·数据库·人工智能·小程序·数据分析
hhb_6185 小时前
一键生成数据看板,ECharts实战演示
前端·javascript·echarts
Java后端的Ai之路5 小时前
08_React组件API
前端·react.js·前端框架
小马不起床5 小时前
零基础玩转 FastAPI_09:前端基础工程构建
前端·状态模式·fastapi