上滑加载:

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;
			  }
			})
		},
}

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐