更多信息请访问：Harmonyos技术社区https://harmonyos.51cto.com，与华为官方共同打造的声明式开发范式ArkUI中TS扩展的语法和概念请参考官网官方文档地址：TSextension-baseddeclarativedevelopmentparadigm1,TSextension-baseddeclarativedevelopmentparadigm2本文介绍列表刷新：下拉刷新拉取uptoload更多效果演示主要知识点列表容器（List）、触摸事件（onTouch）、位置设置（offset）、显示动画（animateTo）实现思路主要是基于List中的回调方法onScrollIndex()来监听当前列表的first和last索引，根据touch事件onTouch()处理下拉和上拉。下拉刷新效果1.容器布局Column垂直结构：下拉刷新，列表。父容器设置触摸事件。如果列表中没有数据或数据很少，可以全局响应。初始偏移下拉刷新：1（负）自高。离开屏幕的顶部。列表：0，默认在顶部。(部分关键代码)......//下拉刷新布局高度privatepullRefreshHeight=70//列表y坐标偏移@StateoffsetY:number=0build(){Column(){//下拉刷新Flex(){......}.width('100%').height(this.pullRefreshHeight).offset({x:0,y:`${vp2px(-this.pullRefreshHeight)+this.offsetY}px`})//布局随着列表偏移量移动//ListList(){...}.offset({x:0,y:`${this.offsetY}px`})//触摸事件计算偏移量单位是px，记得加上unit.onScrollIndex((start,end)=>{//监听当前列表的第一个indexconsole.info(`${start}=start============end=${end}`)this.startIndex=startthis.endIndex=end})}.width('100%').height('100%').onTouch((event)=>this.listTouchEvent(event))//父容器设置触摸事件，当列表没有数据时，也可以下拉刷新。}......2。触摸事件：移动手指下拉改变偏移量；根据是否可以刷新抬起手指：显示刷新状态；请求数据成功后，关闭刷新状态。（部分按键代码）......//按下的y坐标privatedownY=0listTouchEvent(event:TouchEvent){switch(event.type){caseTouchType.Down://fingerpressed//记录按下的y坐标。downY=event.touches[0].ybreakcaseTouchType.Move://fingermovement//当第一个index为0时if(this.startIndex==0){//下拉刷新布局高度varheight=vp2px(this.pullRefreshHeight)//滑动偏移量this.offsetY=event.touches[0].y-this.downY//偏移量大于下拉刷新布局的高度，满足刷新条件if(this.offsetY>=height){//是刷新this.isCanRefresh=true//状态1：释放刷新this.pullRefreshState(1)//offset的值缓慢增加this.offsetY=height+this.offsetY*0.15}else{//状态0：下拉刷新this.pullRefreshState(0)}}breakcaseTouchType.Up://手指抬起caseTouchType.Cancel://意外触摸中断：来电界面//可以刷新if(this.isCanRefresh){console.info('======执行下拉nrefresh========')//偏移量为下拉刷新布局高度this.offsetY=vp2px(this.pullRefreshHeight)//状态2：正在刷新this.pullRefreshState(2)//模拟时间-消耗操作setTimeout(()=>{//刷新数据this.refreshData()//关闭刷新this.closeRefresh()},2000)}else{console.info('======关闭下拉刷新！条件不满足========')//关闭刷新this.closeRefresh()}break}}......上面关键代码可以实现下拉刷新下拉不释放而继续上拉可以取消下拉刷新，不满足条件：动画收回。到达条件：如果一直下拉，下拉偏移会慢慢增加（阻力效应），抬起手指回到下拉刷新布局的高度，等待主动关闭刷新。上拉加载比下拉刷新多，上拉加载的实现比较简单。1、布局结构：在List末尾添加ListItem()。当到达最后一项时，偏移量达到加载更多的条件，动态显示布局。(部分关键代码)......//上拉加载的布局默认高度privateloadMoreDefaultHeight=70//是否显示上拉加载的布局@StateisVisibleLoadMore:boolean=falsebuild(){Column(){//下拉刷新。.....//ListList(){ForEach(this.list,item=>{ListItem(){Column(){Text(`我是测试内容${item}`).padding(15).fontSize(18)}}},item=>item.toString())//===========================新代码start==================================//加载更多布局ListItem(){Flex(){...}.width('100%').height(this.loadMoreHeight).visibility(this.isVisibleLoadMore?Visibility.Visible:Visibility.None)//是否显示布局}//========================新代码结束================================}.offset({x:0,y:`${this.offsetY}px`})//触摸事件计算的偏移量单位是px，记得加上单位。onScrollIndex((start,end)=>{//监听当前列表console的第一个index.info(`${start}=start=============end=${end}`)this.startIndex=startthis.endIndex=end})}.width('100%').height('100%').onTouch((event)=>this.listTouchEvent(event))//父容器设置触摸事件，当列表没有数据时，也可以下拉刷新。}......2。触摸事件：移动手指向上拉改变偏移量，判断是否显示布局；抬起手指将偏移设置为0，数据请求成功后关闭刷新状态。（部分按键代码）......//按下的y坐标privatedownY=0listTouchEvent(event:TouchEvent){switch(event.type){caseTouchType.Down://fingerpressed//记录按下的y坐标。downY=event.touches[0].ybreakcaseTouchType.Move://fingermovement//因为loadingmore是在list后面加一个item，当一屏能显示所有list时，endIndex为length+1if(this.endIndex==this.list.length-1||this.endIndex==this.list.length){//滑动偏移this.offsetY=event.touches[0].y-this.downY//if(Math.abs(this.offsetY)>vp2px(this.loadMoreHeight)/2){this.isCanLoadMore=true//显示布局this.isVisibleLoadMore=true//offset慢慢增加this.offsetY=-vp2px(this.loadMoreHeight)+this.offsetY*0.1}}}breakcaseTouchType.Up://手指抬起caseTouchType.Cancel://意外触摸中断：来电接口animateTo({duration:200,//动画时长},()=>{//偏移设置为0this.offsetY=0})if(this.isCanLoadMore){console.info('======执行加载更多========')//Loading...this.isLoading=true//模拟耗时操作setTimeout(()=>{this.closeLoadMore()this.loadMoreData()},2000)}else{console.info('======关闭加载更多！条件不满足========')this.closeLoadMore()}break}}...到头来，每天进步一点点，付出一点点努力。完整代码已经优化，代码量比较大，就不单独贴了https://gitee.com/liangdidi/ListPullRefreshLoadMoreDemo（需要登录才能看到demo图片）更多信息，请访问：与华为合作共建Harmonyos技术社区https://harmonyos.51cto.com
