uniapp最简单的上拉加载更多demo

    data() {
        return {
            list:[],//数据列表
            page: 1,//页数
        }
    },
    //请求一下数据(进入页面请求一次)
    onLoad() {
        this.getnewsList(this.page)
    },
    // 监听触底
    onReachBottom() {
        this.getnewsList(this.page);
    },
    methods: {
        //屏幕到底部时候触发此事件
        //以下是演示，具体是要看接口再操作
        getnewsList(page) {    
            uni.request({
                //两种写法，看接口所需
                //1.如果接口后面数据不是页数的话就这样写
                url:'接口',
                data:{page},

                //2.如果接口后面数据是页数的话就这样写
                url:'接口'+page,
                success:(res) => {                        
                    //如果返回没有数据了,数组长度为0
                    if (res.data.length==0) { 
                        //没有数据就替换一下loadingText的值
                       uni.showToast({
                            title: '没有更多数据了',
                            icon: 'none',
                            mask: false
                       })
                        return;
                    }else{
                        this.page+=1; //每触底一次 page +1
                        this.list= this.list.concat(res.data); //将数据拼接在一起
                    }
                    
                 }
             });
        }
    },
                                    

遇到的问题, 有些人 遇到tab高度不确定,  点击tab栏 触发触底! 解决方案如下:

data() {
    return {
        isReachBottom:true,//是否开启触底函数
    }
}

 methods: {
        //屏幕到底部时候触发此事件
        //以下是演示，具体是要看接口再操作
        getnewsList(page) {    
            uni.request({
                //两种写法，看接口所需
                //1.如果接口后面数据不是页数的话就这样写
                url:'接口',
                data:{page},

                //2.如果接口后面数据是页数的话就这样写
                url:'接口'+page,
                success:(res) => {   
                     this.isReachBottom = true //接口请求到数据, 放开触底                    
                    //如果返回没有数据了,数组长度为0
                    if (res.data.length==0) { 
                       uni.showToast({
                            title: '没有更多数据了',
                            icon: 'none',
                            mask: false
                       })
                        return;
                    }else{
                        this.page+=1; //每触底一次 page +1
                        this.list= this.list.concat(res.data); //将数据拼接在一起
                    }
                    
                 }
             });
        }
    },

// 监听触底
  onReachBottom() {
      if(!this.isReachBottom) return;
      this.getnewsList(this.page); 
},

还有, tab切换的时候:

tabClick() {
       this.isReachBottom = false; tab栏切换,关闭触底
       this.page = 1
       this.list = []
       this.getnewsList(1)
 },