uni-app中页面的上拉加载与下拉刷新（下）

其中 loadding变量的作用为

1 uni-load-more 组件所需要的状态值。

2 保证只有一个请求中的数据。假设页面已经刷新到底部，触发数据的拉取。此时假设数据还没有返回的时候，用户又拼命的继续操作。这就会导致同时几个分页在拉取数据，容易导致口的串联访问，会导致数据得错乱。

kotlin 复制代码

if(this.loading == 'loading' || this.loading == 'noMore'){return}

当我们使用loading变量的时候，如果有没处理的完成的请求就要拦截掉其余请求，这样能保证数据得准确。

query_params中，除了分页必须的参数外，就是别的对列表的筛选字段了，筛选字段发生变化时候，需要初始化分页跟筛选条件，重新拉取数据。

list_data中就是存储的拉取到的数据，用于数据的循环与便利。

2 变量定义完成以后，就是核心得拉取数据方法了 methods方法中定义 fetchData数据拉取的方法。

kotlin 复制代码

fetchData(isLoadMore=false){
    if(isLoadMore){
        if(this.loading == 'loading' || this.loading == 'noMore'){return}	
    }
    this.loading = 'loading'
    if(isLoadMore){
        this.query_params.pageNo ++
    }else{
        this.query_params.pageNo = 1
        this.list_data = []
    }
    
    this.$api.listService(this.query_params)
    .then(res=>{
        let {result} = res
        if(result.records.length == 0 || result.pages == result.current){
            this.loading = 'noMore'
        }else{
            this.loading = 'more'
        }

        this.list_data =this.list_data.concat(res.result.records)
    })
}

方法中需要有一个唯一的参数 isLoadMore默认值是 false。当前参数意思为，是否拉取新一页的数据。

if(isLoadMore){ }这个判断就是在判断是否有处理中的请求，如果有就要中断本次数据的处理。

this.loading = 'loading' 立刻将当前请求变成处理中的，拦截后续请求，防止数据的错乱。

对于加载更多数据，或者是筛选条件发生改变重新拉取数据两种情况的分页处理方式是不同的。前者要求页面数 +1 而后者是要求页码数变成 1 然后已有的列表数据清空的。

下面就是拉取数据的业务，当拉取数据完成以后。需要判断列表中的数据是否已经为空了。为空则代表数据已经没了，此时 loading变成noMore拦截掉后续所有的数据请求。如果还有数据，那loading的状态变成more 代表用户可以继续进行下拉数据查看更多的数据。

3 不同的位置调用fetchData 拉取数据即可。只是参数的不同而已。

javascript 复制代码

	handleScrollToLower(e){
                this.fetchData(true)
        },
         handleSearch(){
                this.fetchData()
        },

除了滚动到底部需要更多数据传递true外，其他需要初始化的位置都直接调用即可。

分页拉取数据的业务的总结

上面完整的从静态页面到逻辑都很详细的介绍了分页的实现方式。当后续页面中涉及到分页业务的时候，我们不需要过多的去思考怎么实现，直接去拷贝过来核心代码，稍微进行修改即可非常容易的完成这个功能。

拷贝内容区域

xml 复制代码

<!-- 内容区域 -->
<view class="sec1">
    <scroll-view 
    :style="'height:'+ (window_height-120) +'px'" 
    scroll-y="true" 
    @scrolltolower="handleScrollToLower">
        <view class="swiper_item"  v-for="(it,ind) in list_data" :key="ind">
            
        </view>
        <view><uni-load-more :status="loading"></uni-load-more></view>
    </scroll-view>
</view>

拷贝分页所需参数

vbnet 复制代码

loading:'',   // more/loading/noMore
query_params:{
        pageNo:1,
        pageSize:3,
        typeOne:'',
        typeTwo:'',
        provinceId:'',
        cityId:'',
        areaId:'',
        rank:1,
},
list_data:[]

拷贝 fetchData方法还有初始化高度的方法（上方已经出现过）

拷贝滚动到底部的具体实现

javascript 复制代码

handleScrollToLower(e){
        this.fetchData(true)
},

这样稍加修改即可快速简单的实现分页。