2021-10-17 uniapp分页加载数据

uniapp分页加载数据，解决一次性加载全部数据导致的卡顿问题

这里以左右可滑动的刷题页面举例

template部分

<template>
	<view>
    	<swiper :current="current" @change="change" >
        	<swiper-item v-for="(question,index) in questionList" :key="index">
                <view>
                	<!-- 内容部分省略-->
                </view>            
            </swiper-item>
        </swiper>
    </view>
</template>

script部分

<script>
	export default{
        data(){
            return{
               current:0,//当前页面 
               questionList:[],//问题列表
               page:1//第一此分页加载时的界面
            }
        }
        onload(){
            this.getData()//页面 加载时请求一次界面 
        },
        methods:{
        change(){
            this.current=e.detail.current//获取改变后得页数并赋值给current
            var num = (this.current+1)%20//设置一页共有20个数据
            if(num===0){
                this.getData()//到达 最后一页的时候再一次加载数据
            }
        },
        //获取数据
        getData(){
            uni.request({
                url:"需要请求的url"
                method:"GET",
                data:{
               	    pageNum:this.page,
              	  	pageSize:20
                }
                success:(res)=>{
                    this.questionList=res.data//获取到的值赋值给问题列表
                        }
                this.page+=1//设置 page的值为下一页
            })
        }
            
    }
}
</script>