uniapp 底部加载更多

方法一、使用组件z-paging组件

官网：介绍 | z-paging文档

代码示例：

页面代码

<z-paging ref="paging" v-model="dataList" @query="queryList">
	<view class="item" v-for="(item,index) in dataList" :key="index">
		<view class="item-title">{{item.title}}</view>
	</view>
</z-paging>

js代码

 export default {
        data() {
            return {
                dataList: []
            };
        },
        methods: {
            queryList(pageNo, pageSize) {
              	// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
              	// 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过                    this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
                this.$request.queryList({ pageNo,pageSize }).then(res => {
                	// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
                	this.$refs.paging.complete(res.data.list);
                }).catch(res => {
                	// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
                	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
                	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
                	this.$refs.paging.complete(false);
                })
            }
        },
    };

但是我在使用的时候发现，实现不了功能，不能正常的使用的情景我遇到的有这几种：1）使用组件，在子组件中使用z-paging 2）同一个页面，通过tab标签切换，多个标签都使用z-paging

方法二、使用uniapp的触底事件

1. 在pages.json文件中，找到需要使用触底加载的页面，添加这句

"onReachBottomDistance": 50

{
	"path": "pages/tb/patientTracking/myPatient",
	"style": {
		"navigationBarTitleText": "患者追踪-我的患者",
		"navigationBarBackgroundColor": "#04BAAD",
		"navigationBarTextStyle": "white",
		"enablePullDownRefresh": true,
		"onReachBottomDistance": 50 //这个50是指距离底部50px时
	}
}

然后找到对应的页面文件，添加触底的生命钩子

// 触底事件
  onReachBottom(){
// 触底后运行的逻辑
    if (this.tabClick==1){
      this.getData(this.patientParam.pageNo,this.patientParam.pageSize)
      // console.log("到达底部x3")
    }
  },

如果是需要实现触底分页的查询，需要判断逻辑，是否到达最后一页，有多种实现方式，这里我的逻辑是，在页面中添加一个全局变量，包含分页的页码、页大小、是否可以继续请求数据，在请求之前先判断是否可以继续请求，不需要则不请求，以下是全局变量参数

patientParam:{
    pageNo:1,
    pageSize:10,
    finished:false
},

这里是请求数据的方法

    getData(pageNo,pageSize){
      // 无数据，不请求了
      if (this.patientParam.finished){
        return
      }
      if (!pageNo){
        pageNo=1
      }
      if (!pageSize){
        pageSize=10
      }
      let param=new TrackParamVO(13,pageNo,pageSize)
      listPatient(param).then((res)=>{
        // console.log(res.length);
        // 请求还有数据
        if (res&&res.length>0){
          this.patientList.push(...res)
        }else {
          this.patientParam.finished=true
        }
        if (res.length<=this.patientParam.pageSize){
          this.patientParam.pageNo++
        }else {
          this.patientParam.finished=true
        }
      }).catch((res) => {
        console.log("下一页请求失败")
      });

具体的逻辑根据自己的需求修改，大原则就是判断是否可以请求数据和分页页码的递增；每次请求到的数据拼接到现有数据的数组尾部