投稿

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

Vedu • • 程序开发 • 阅读 2066

配置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.com/procedure/29853.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2021-10-24 09:09
下一篇 2021-10-24 09:11

相关推荐

发表评论

登录后才能评论