uniapp小程序上滑加载与下拉刷新

上滑加载:

pages.json文件里添加配置
 "globalStyle": {
	"onReachBottomDistance":50
  }

代码:
onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
		// console.log("滚动距离为:" + e.scrollTop);
},

onReachBottom() {
		// console.log("触底")
		if(this.list.length < this.total){
			//触底时继续请求下一页展示的数据
			this.queryParams.pageNum++;
			this.getBlogList();
		}
},

下拉刷新:

pages.json添加配置:
{
    "path": "pages/index",
    "style": {
      "navigationBarTitleText": "xxx",
      "navigationStyle": "custom",
	  "enablePullDownRefresh": true
    }
  }

代码:
    onLoad: function() {
		
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
    },
	onPullDownRefresh() {
		console.log('refresh');
		this.queryParams.pageNum=1;
		this.getList();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},

   methods:{
    getBlogList(){
			list(this.queryParams).then(response => {
			  this.total=response.total;
			  var addList = response.rows;
			  
			  if(this.list.length > 0){
				  if(this.queryParams.pageNum == 1){
					  //避免重复
					  var ids = [];
					  for(var i=0;i<this.list.length;i++){
					    ids.push(this.list[i].id);
					  }
					  for(var i=addList.length-1;i>=0;i--){
					    if(ids.indexOf(addList[i].id) == -1){
					      this.list.unshift(addList[i]);
					    }
					  }
				  }else{
				  	addList.map(item => {
				  		this.list.push(item)			  
				  	})					  
				  }
			  }else{
				  this.list=addList;
			  }
			})
		},
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞流银河

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值