在玩中学直接上手实战是猫哥一贯的自学方法心得。假期期间实在无聊不睡懒觉、不看电影、也不刷手机、不玩游戏、也无处可去。那么我干嘛嘞感觉假期好没意思啊。做什么呢? 于是翻出来之前做过的“爱影家”影视app项目找个跨多端的技术栈再玩一把。本文以iMovie影视App为例详细介绍在uni-app x框架下实现无限滚动列表的核心技术方案。通过scroll-view组件的scrolltolower事件触发分页加载结合startcount分页参数设计实现流畅的上滑触底加载体验。前言在移动端应用中长列表的分页加载几乎是每个项目的必备功能。常见的实现方案有两种一种是传统的下一页按钮用户主动点击翻页另一种是更符合移动端习惯的上滑触底自动加载无限滚动用户只需自然地向上滑动内容便会源源不断地加载出来体验更加流畅。本文以 iMovie 影视 App 中的电影列表页pages/movie/movie-list.uvue为例在 uni-app x 框架和 UTS 语言的背景下完整拆解一个上滑触底加载更多列表的实现思路——从状态设计、触底检测机制、分页参数管理、防重入锁到 UI 反馈与数据流闭环力求把每一处设计决策背后的为什么都讲清楚。该页面还有一个值得关注的特点一个页面文件承担五种列表类型热门电影、即将上映、热门剧集、豆瓣排行榜、北美票房榜通过 URL 参数type区分导航栏标题也随之动态切换是组件复用的一个典型范例。一、整体架构该页面是一个通用影视列表页通过 URL 参数type区分不同列表类型热门电影、即将上映、热门剧集、豆瓣榜单、北美票房对应的导航栏标题也会动态切换。该项目的开源地址https://gitcode.com/qq8864/uniappx_imovieURL 参数 type │ ▼ onMounted → 解析 type → 设置导航栏标题 → 触发首次 loadMore │ ▼ 请求第一页数据 → 渲染列表 │ 用户上滑触底 ▼ scroll-view 触发 scrolltolower │ ▼ 请求下一页数据 → 追加到列表实现效果二、状态设计分页列表的核心状态只有5 个响应式变量和1 个计算属性变量类型作用pageTypestring当前列表类型来自路由参数movieListMovieItem[]已加载的全部电影条目累积追加totalnumber服务端返回的总条目数nextStartnumber下一页请求的起始偏移量loadingboolean是否正在请求中防重入锁noMore(computed)boolean是否已加载完毕noMore的计算逻辑极为简洁constnoMorecomputed(():boolean{returntotal.value0movieList.value.lengthtotal.value})只要本地列表长度服务端总数就判定没有更多。这里额外加了total 0的前置条件避免初始化时total为 0被误判为已加载完。三、滚动触底检测触底检测完全交给scroll-view组件的内置能力scroll-viewstyleflex:1scroll-ylower-threshold100scrolltolowerloadMorescroll-y启用纵向滚动。lower-threshold100距底部还有100px时即触发而非等到真正触底使加载提前发起用户感知不到等待。scrolltolowerloadMore绑定加载函数由框架在满足阈值时自动回调。这种方式无需自己监听scroll事件计算位置完全依赖组件层的封装代码量极少。四、loadMore函数分页加载的核心constloadMoreasync(){if(loading.value||noMore.value)return// ① 双重防护loading.valuetrue// ② 加锁try{constresultawaitMovieApi.getMovies(pageType.value,nextStart.value,PAGE_SIZE)result.list.forEach((item:MovieItem){movieList.value.push(item)// ③ 追加不替换})total.valueresult.total// ④ 更新总数nextStart.valueresult.list.length// ⑤ 推进游标}catch(e){console.error(加载失败:,e)}finally{loading.valuefalse// ⑥ 解锁}}每一步的设计意图① 双重防护loading.value防止用户快速多次触底时并发发出重复请求noMore.value防止已到末页还继续请求。两者缺一会导致重复数据或多余的网络请求。② 加锁 / ⑥ 解锁loading标志在请求发起前置true在finally中无论成功还是失败都恢复false保证锁的释放不遗漏。③ 追加而非替换使用push将新数据逐条追加到movieList而不是直接赋值覆盖这是无限列表的关键——历史数据必须保留。④ 更新总数每次请求都用服务端最新返回的total刷新本地total.value应对服务端数据动态增减的场景。⑤ 推进游标nextStart不是简单地加PAGE_SIZE而是加上实际返回的条目数result.list.length。当最后一页数据不足PAGE_SIZE条时这样计算更准确同时noMore的判断也自然地在下次loadMore入口就拦住了。五、分页参数设计startcount模式API 层采用偏移量分页Offset PaginationstaticasyncgetMovies(type:string,start:number,count:number):PromiseMoviePagestart本次请求从第几条开始取0-basedcount每次取多少条固定为PAGE_SIZE 20请求时的偏移量推进过程示例假设每页恰好返回 20 条第1次start0, count20 → 取第 1~20 条nextStart 变为 20 第2次start20, count20 → 取第 21~40 条nextStart 变为 40 第3次start40, count20 → 取第 41~60 条nextStart 变为 60 ... 最后movieList.length total → noMoretrue不再请求服务端返回的MoviePage结构exporttypeMoviePage{list:MovieItem[]// 本页数据total:number// 总条目数用于判断是否到底start:number// 本次起始偏移回传供调试pageTitle:string// 页面标题部分接口有特定标题}total是实现到底检测的关键服务端每次响应都携带总数客户端用它和本地列表长度比较无需额外的是否最后一页字段。六、页面初始化流程页面入口在onMountedonMounted((){constpagesgetCurrentPages()constcurrentPagepages[pages.length-1]constoptscurrentPage.options// 读取 URL 参数consttypeopts[type]pageType.value(type!null(typeasstring).length0)?typeasstring:hotmovie// 默认热门电影uni.setNavigationBarTitle({title:titleForType(pageType.value)})loadMore()// 触发首次加载})这里通过getCurrentPages()读取路由参数适合 uni-app x 的页面栈模型。titleForType根据type值映射对应的中文标题使这一个页面文件承担了五种不同列表的展示职责consttitleForType(type:string):string{if(typesoonmovie)return即将上映if(typetvhot)return热门剧集if(typetopmovie)return豆瓣排行榜if(typeusmovie)return北美票房榜return热门影视}七、加载状态的 UI 反馈列表底部有两种互斥的状态提示viewv-ifloadingclassstatus-viewtextclassstatus-text加载中.../text/viewviewv-if!loading noMoreclassstatus-viewtextclassstatus-text没有更多了/text/view状态loadingnoMore显示内容请求中true任意“加载中…”已到末页falsetrue“没有更多了”正常还有更多falsefalse无提示这两个条件本身已经完备loading和noMore不会同时为true到达末页后noMore返回true后续loadMore调用在入口即返回loading不会变true。八、完整数据流总结用户进入页面 │ onMounted ├── 解析 URL type 参数 ├── 动态设置导航栏标题 └── loadMore() │ ├── loading true ├── POST /hotmovie { start: 0, count: 20 } ├── movieList.push(...result.list) ├── total result.total ├── nextStart 20 └── loading false 用户上滑 │ scroll-view 距底 100px │ scrolltolower → loadMore() │ ├── 检查 loading / noMore → 通过 ├── loading true ├── POST /hotmovie { start: 20, count: 20 } ├── movieList.push(...result.list) ← 追加不覆盖 ├── nextStart 40 └── loading false ... 重复上滑 ... movieList.length total │ noMore true │ 下次 loadMore() 入口拦截请求终止 UI 显示没有更多了九、总结回顾整个实现这个电影列表分页加载的方案体现了几个值得借鉴的工程思路状态最小化原则。整个分页逻辑仅用 5 个响应式变量和 1 个 computed 属性就完整描述了列表的所有状态没有冗余字段每个变量职责清晰阅读代码时不需要在多个地方拼凑状态含义。防御性编程。loadMore入口处的双重守卫loadingnoMore是防止竞态条件的关键。在移动端用户的快速滑动操作很容易在上一次请求未完成前再次触发触底事件没有这道防护轻则产生重复数据重则造成数据乱序。游标精确性优先于约定。nextStart result.list.length而不是 PAGE_SIZE这一行看似细微的差异保证了在服务端返回数据不足整页时偏移量依然准确避免了末页数据丢失或请求空页的边界问题。触底预判提升体验。lower-threshold100让加载请求提前在距底 100px 时发出用户在视觉上几乎感受不到等待加载的停顿这是无限滚动体验优化的常见手法。一页多用降低维护成本。通过 URL 参数type将五种不同的列表类型统一到一个页面文件既减少了重复代码也意味着将来如果分页逻辑需要调整只改一处即可全部生效。这套模式在 uni-app x 项目中具有很强的通用性无论是商品列表、新闻列表还是搜索结果页都可以直接套用这一状态设计和loadMore函数结构快速落地稳健的无限滚动功能。