uniapp触底加载更多数据的方法

配置pages.json

在uni-app中,页面滑动到底部可以监听到onReachBottom() 方法,如下配置:

// pages.json 文件中
{
  "path": "pages/index",
    "style": {
      "navigationBarTitleText": "当前页面的title",
      "navigationStyle":"custom", //当前页面不需要导航
      "enablePullDownRefresh":true, //配置后,可以下拉刷新,上拉加载
		  "onReachBottomDistance":100
    }
},
 
  // 滑动到距离底部100px的时候触发(上拉加载)
  onReachBottom() {
    console.log('滑动到距离底部100px的时候触发,可以放 。。业务逻辑');
  },
 //下拉执行的时候触发 (下拉刷新)  
 onPullDownRefresh () {
      //放要执行的动作....
      wx.stopPullDownRefresh() 
     //停止下拉刷新效果的api,如果发现进入刷新状态无法停止,可以用这个
  },

获取数据

思路:在页面加载的时候,会先请求10条数据,然后用户滑动到页面底部,继续加载11-20条数据,以此类推。

data() {//变量配置处
	return {
    hots: [], //活动数据列表
    params:{
      limit: 10,//默认每次请求10条
      start: 0,
    },
    //是否还有下一页,即是否还有数据
    hasMore: true,
    dataEnd:false, //数据加载完了
   }
},
 // 页面生命周期方法之onload
onLoad: function (option) { 
		this.getList();//页面加载获取前10条数据	
},
 //页面滑动到底部触发的方法之onReachBottom
 onReachBottom(){
   this.handleTolower();//滑动到底部加载
 },
 // methods 里面放方法
 methods:{
   // 获取接口数据--因为会反复执行,封装在这里
			getList() {
				uni.showLoading({
					title:"加载中" //为了网络慢,给用户的友好等待提示
				});
        //进行接口数据请求
				uni.request({
					url: getApp().globalData.url+"list",//地址
					method:"POST",//方式
					data: this.params,//参数
					 success: (result) => {
						if (result.data.data.length === 0) {
							this.hasMore = false;
							this.dataEnd=true
							return;
						}
						//数据拼接
						this.hots = [...this.hots, ...result.data.data]
					}, 
					complete(){
						uni.hideLoading(); //loading 弹窗end
					}						
				})
			},//getList() 方法end
      
    //触底请求的方法,就是修改参数
        handleTolower() {
          // 1、修改参数 skip +=limit 2、重新发送请求 3、数据叠加
          if (this.hasMore) {
            this.params.start += this.params.limit;
            this.getList();
          } else {
            // 弹窗形式或者其他形式告诉用户没有数据了
            this.dataEnd=true
          }
        }// handleTolower()  end
   
 }
uniapp 触底加载更多数据的方法

uniapp 触底加载更多数据的方法

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/procedure/29853.html

发表评论

登录后才能评论