uniapp滚动加载

最新推荐文章于 2024-08-22 11:53:20 发布

正在努力的二哈

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量1k

点赞数

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/weixin_47166228/article/details/126751540

版权

该博客介绍了如何在Vue项目中利用scroll-view组件实现滚动加载更多数据的功能。通过监听scrolltolower事件，触发updateList方法获取新增数据，并通过getShareList异步方法处理分页请求。当接口返回空数据时，设置isLastItem为true，防止无限加载。同时，文章提到了scroll-view内div需设定高度才能使滚动生效。

摘要由CSDN通过智能技术生成

<scroll-view v-if="hasData"  scroll-y="true" @scrolltolower="updateList">
					<view class="scrollSt">
						<view v-for="(item,index) in shareList" :key="index" class="oneText">
							<view style="width:270rpx;" class="">
								{{item.name}}
							</view>
							<view style="height:30rpx; text-align: center;width:100rpx;">
								<img v-if="item.certification==1" style="width:26rpx;height:30rpx;display: inline-block;"
									src="../../../../../../static/新增icon/认证.svg" alt="">
							</view>
							<view style="width:270rpx;text-align: right;" class="">
								{{item.createTime | format}}
							</view>
						</view>
						<IsEnd v-if="isLastItem"></IsEnd>
					</view>
</scroll-view>

注意用scroll-view一定要给里面div给高度不然不生效

触底事件    return:{
              shouldRequest:true,//定义变量区分触底加载的调接口获取的数据是不是空值
              updatePage：1，
           },
          updateList(){
               // 调方法获取新增数据
				if(this.shouldRequest){
					this.getShareList(list=>{
					//更新接口没有新数据变为false
						if(list==0){
							this.isLastItem=true
							this.shouldRequest=false
						}else{
						//有新增数据
							this.shareList=[...this.shareList,...list]
						}
					})
				}
			},
			//调数据的方法
			async getShareList(callback){
				try{
					const res=await uni.$http("/share/inviteList",{
						state:3,
						page:this.updatePage,//分页参数
						size:10
					})
					if(res.code==0){
						if(res.data.list.length==0){
							callback(0)
						}else{
							this.updatePage++
							//返回的数据uuid转http路径方法处理
							res.data.list=await getFilePath(res.data.list,['icon'])
							callback(res.data.list)
						}
					}
				}catch(e){
					//TODO handle the exception
				}
			},