uniapp上拉加载更多与下拉刷新

前提问题
当页面加载数据过多时，等全部数据加载渲染完会很慢，小程序中未设置分页样式
选用了上拉加载更多的方式，一页一页的去继续加载数据
当想重新加载此页数据时，可以添加下拉刷新功能，下拉后会重新刷新此页数据
解决过程
1.上拉加载更多的主要是设置每页条数，和初始页码，默认初始加载1页，每页10条，每上拉一次会把页码加1，带着当前页码请求该页码的数据，将请求回来的新数据拼接到原本的老数据中
2.下拉刷新是利用uniapp自带API，下拉时触发此页加载方法
解决结果

上拉加载更多

页面代码

<view class="content">
    内容
</view>    
 <view v-if="state.isLoadMore">  
    <uni-load-more :status="state.loadStatus" ></uni-load-more>
</view>

js代码

import {onReachBottom,onPullDownRefresh,onShow} from '@dcloudio/uni-app'
const state = reactive({
    filtrate: {//请求参数
        size: 10, // 条数
        num: 1, // 页数
    },
    loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
    isLoadMore:false,  //是否加载中
    taskList[],//数据
})
//进页面获取数据
 onMounted(() => {
    getTaskList()
 })
 
// 获取数据
 const getList = ()=>{
     console.log('请求')
     getProcessTask(state.filtrate).then(res=>{
         if(res.records.length!==0){
             //首次加载10条数据，后进行拼接
             state.taskList = state.taskList.concat(res.records)
             //判断接口返回数据量小于请求数据量，则表示此为最后一页
             if(res.records.length<state.filtrate.size){ 
                 state.isLoadMore=true
                 state.loadStatus='nomore'
             }else{
                 state.isLoadMore=false
             }
         }else{
            state.isLoadMore=true
            state.loadStatus='nomore'
         }
     }).catch(err => {})
 }
 
//上拉触底函数        
onReachBottom(()=>{
  if(!state.isLoadMore){  //此处进行判断上锁，防止重复请求
        state.isLoadMore=true
        state.filtrate.num+=1//页数加1
        getList()
  }
})

下拉刷新
page.json

找到需要加下拉刷新的页面添加"enablePullDownRefresh":true属性

"pages": [ 
        {
            "path": "pages/tab/task/task",
            "style": {
                "navigationBarTitleText": "任务",
                "navigationStyle": "custom",
                "enablePullDownRefresh":true
            }
        }
    ],

页面js中

onPullDownRefresh(() => {
  //重新触发获取数据方法，刷新接口
  state.taskList=[]
  state.filtrate.num = 1
  getList()
  //结束刷新
  uni.stopPullDownRefresh()
})

附加：数据深拷贝

//数据
const state = reactive({
    filtrate: {
        id: '',
        name: '',
        uName: '',
        statusList:'',
        size: 10, // 条数
        num: 1, // 页数
    }
})
//使用JSON
let param = JSON.parse(JSON.stringify(state.filtrate))

删除对象的指定属性

delete (state.filtrate.num);

Ending~