uniapp上滑数据加载跟下拉刷新，配合若依移动端使用，后台使用若依vue前后端分离版，或者能返回数据即可

一、简介：

当页面出现需要加载大量数据的时候，页面不可能一下把数据全部返回，在页面中进行上滑操作，触底则进行数据加载，类似于一般的分页，只是在uniapp中将list数据拼接，效果如下图所示，刷新也是一样，在代码中，将上拉加载跟下拉刷新结合，再配合搜索使用，就对一般的使用场景都包含了。
本组件可配合若依移动端uniapp跟若依vue后端使用，其getlist方法可以直接调用若依vue前后端分离版接口

要实现上拉加载跟下拉刷新，首先要在page.json当中设置
“onReachBottomDistance”: 150, //上拉距离多少加载
“enablePullDownRefresh” :true, //开启上拉刷新
“backgroundColor” :“#F8F8F8” //下拉背景色

{
	  "path" : "pages/car/carlist",
	  "style" :                                                                                    
	  {
		  "navigationBarTitleText": "列表",
		  "style" :{
			  "onReachBottomDistance": 150,
			  "enablePullDownRefresh" :true,
			  "backgroundColor" :"#F8F8F8"
		  }
	  }
	 },

二、代码

1.前端vue

2.js

<script>
	import {listCarLicense,delCarLicense} from '@/api/car/car'
	export default {
		data() {
			return {
				nvueWidth: 730,
				accordionVal:'1',
				searchValue: '',
				queryParams:{
					pageNum: 1,
					pageSize: 20,
					parkId: null,
					carUserName: ''
					
				},
				// carLicense列表数据
				carLicenseList: [],
				loading: false,
				status: "loading",
				// 总条数
				total: 0,
				
			}
			
		},
    //触底函数
		onReachBottom() {
      //判断 如果每页显示个数*总页数>返回的总数，则显示底部加载状态为没有更多数据了，否则显示转圈，正在加载
			if(this.queryParams.pageNum * this.queryParams.pageSize >= this.total){
				this.status="noMore"
				return ;
			}else{
				this.status="loading"
			}
			if(this.loading) return 
			
			 this.queryParams.pageNum += 1
			// console.log('我到地步了')
			this.getList()
		},
		// 上拉动态刷新函数
		onPullDownRefresh(){
			// 1，重置数据
			this.queryParams.pageNum = 1
			this.total = 0
			this.loading = false
			this.carLicenseList = []
			//2 发起请求
			this.getList(() => uni.stopPullDownRefresh())
		},
    //页面进来首先进行加载数据，调用searchList（）方法
		created() {
		    this.searchList();
		  },
		methods: {
			/** 查询carLicense列表 */
			async getList(cb) {
				this.loading = true;
				listCarLicense(this.queryParams).then(response => {
					this.loading = false;
					cb && cb()
          //当前数据与后台传过来的数据进行合并
					this.carLicenseList =[...this.carLicenseList,...response.rows] ;
					this.total = response.total;
				  });
			},
			searchList(){
				this.loading = true;
				listCarLicense(this.queryParams).then(response => {
					this.loading = false;
					this.carLicenseList =[...this.carLicenseList,...response.rows] ;
					this.total = response.total;
				  });
			},
      //搜索框函数
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
				this.queryParams.carUserName=res.value
				this.queryParams.pageNum = 1;
				this.carLicenseList=[]
				this.searchList()
				this.status="noMore"
				
			},
      //搜索框动态搜索显示查到的列表
			input(res) {
				console.log('----input:', res)
				this.queryParams.carUserName=res
				this.queryParams.pageNum = 1
				this.total=0
				this.carLicenseList=[]
				this.loading=true
				this.status="noMore"
				this.searchList()
				
			},
      //搜索框清空函数
			clear(res) {
				this.queryParams.carUserName=''
				this.queryParams.pageNum = 1
				this.total=0
				this.carLicenseList=[]
				this.searchList()
				this.loading=false
			},
      //搜索框点击取消函数
			cancel(res) {
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
				this.queryParams.carUserName=''
				this.queryParams.pageNum = 1
				this.total=0
				this.carLicenseList=[]
				this.getList()
			},

      //下面的方法为本程序的特有的逻辑代码，可忽略
			add() {
				this.$tab.navigateTo("/pages/car/addCar");
			},
			edit(item){
				this.$tab.navigateTo("/pages/car/editCar?item="+ encodeURIComponent(JSON.stringify(item)));
			},

			/** 删除按钮操作 */
			handleDelete(item) {
			  const id = item.id;
			  this.$modal.confirm('是否确认删除姓名为"' + item.carUserName + '"的数据项？').then(function() {
				return delCarLicense(id);
			  }).then(() => {
				this.$modal.msgSuccess("删除成功,请下拉刷新页面");
				this.onPullDownRefresh();
			  }).catch(() => {});
			},
	 }
	}
</script>

3.css

4.后台请求的文件

import request from '@/utils/request'

// 查询carLicense列表
export function listCarLicense(query) {
  return request({
    url: '/carLicense/carLicense/list',
    method: 'get',
    data: query
  })
}