uni-app 上拉加载更多效果组件及使用

1.在需要使用上拉加载的页面(index)引入组件

import loadMore from '@/components/load-more.vue'

components: {
    backTop
 },

2.在需要使用上拉加载的页面(index)使用组件

3.data属性设置

data () {

  return {

     loadingState: 0, // 加载更多的状态 

  }

}

4.methods上拉加载方法

// 上拉加载更多
	async _pullup () {
		if (this.loadingState !== 0) {
			return;
		} else {
			this.loadingState = 3;
		}
		this.page ++;
			if (this.page > this.total) {
				this.loadingState = 4;
				return;
			} else {
				var arr = await this.getGoodList(this.page);
				if (arr.pagelist.length>0) {
					setTimeout(() => {
						for (var i = 0; i < arr.pagelist.length; i++) {
							this.goodList.push(arr.pagelist[i]);
						}
						this.loadingState = 0;
					}, 200)
				} else {
					this.loadingState = 3;
				}
			}
	}