uni-app 上拉加載更多效果組件及使用

<template>
	<view class="pull-up" @tap="pullup">
		<view class="rect-text" v-if="state === 0">{{stateText0}}</view>
		<view class="rect-text" v-if="state === 1">{{stateText1}}</view>
		<view class="rect-text" v-if="state === 2">{{stateText2}}</view>
		<view class="rect-text" v-if="state === 3">
			<view class="rect-wrap">
				<view class="rect rect1"></view>
				<view class="rect rect2"></view>
				<view class="rect rect3"></view>
				<view class="rect rect4"></view>
				<view class="rect rect5"></view>
			</view>	
		</view>
		<view class="pu-state-4">
			<view class="rect-text" v-if="state===4">沒有新數據了</view> 
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			state: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				stateText0: '點擊或上拉加載更多...',
				stateText1: '↑上拉加載',
				stateText2: '↓釋放加載',
				stateText4: '沒有新數據了!'
			}
		},
		methods: {
			pullup () {
				this.$emit('pull-up')
			}
		}
	}
</script>

<style>
	.pull-up {
		width: 100%;
		margin-bottom: 20upx;
		text-align: center;
		height: 80upx;
		color: #c1c1c1;
	}
	.rect-text {
		height: 100%;
		line-height: 80upx;
	}
	.rect-wrap {
		margin: 0 auto;
		width: 100upx;
		height: 60upx;
		text-align: center;
		font-size: 8upx;
		margin-top: 8upx;
	}
	.rect-wrap .rect {
		background-color: #7ad237;
    height: 100%;
    width: 6upx;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
	}
	.rect-wrap .rect {
		margin: 4upx;
	}
	.rect-wrap .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .rect-wrap .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }
  .rect-wrap .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  .rect-wrap .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
	@keyframes stretchdelay {
		0%, 40%, 100% {
			transform: scaleY(0.4);
			-webkit-transform: scaleY(0.4);
		}
		20% {
			transform: scaleY(1.0);
			-webkit-transform: scaleY(1.0);
		}
	}
	@-webkit-keyframes stretchdelay {
		0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
		20% { -webkit-transform: scaleY(1.0) }
	}
</style>

1.在需要使用上拉加載的頁面(index)引入組件

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

components: {
    backTop
 },

2.在需要使用上拉加載的頁面(index)使用組件

<load-more  :state="loadingState" @pull-up="_pullup"></load-more>

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