上拉加载

<div ref="lis"><slot v-for="(v,k) in value" :data="v" ></slot><div><div v-if="!is_end"><span>加载中 </span><div></div></div><div v-else>没有更多了</div></div></div>
<style>
<script>
return {
	props:{
		value:{
			default:[]
		},
		//触发距离
		trigger:{
			default:0
		},
		load:{
			default(){}
		}
	},
	data(){
		var vue = this;
		return {
			is_load:false,
			is_end:false,
			on:{
				async up(){
					if(vue.is_load){
						vue.is_load = false;
						var d = vue.load()
						if(Object.prototype.toString.call(d) === '[object Promise]')d = await d;
						if(d === false)vue.is_load = false;
						if(vue.is_load){
							if(vue.$refs.lis && vue.$refs.lis.offsetHeight == vue.$refs.lis.scrollHeight){
								vue.on.up();
							}
						}else{
							vue.is_end = true;
						}
					}
				}
			}
		}
	},
	mounted(){
		var vue = this;
		vue.$refs.lis.addEventListener('scroll',function(){
			if(vue.$refs.lis.scrollTop+vue.$refs.lis.offsetHeight+vue.trigger >= vue.$refs.lis.scrollHeight){
				vue.on.up();
			}
		});
		window.addEventListener('resize',function(){
			if(vue.$refs.lis.offsetHeight == vue.$refs.lis.scrollHeight){
				vue.on.up();
			}
		});
		vue.is_load = true;
		vue.on.up();
	},
	watch:{
		value(v){
			var vue = this;
			vue.is_load = true;
			if(!v.length){
				vue.is_end = false;
				vue.on.up();
			}
		}
	}
}
</script>

.__NAME__{
	.state{
		text-align: center;font-size: 12px;color:#888;height: 30px;line-height: 30px;
		.load{
			.t{vertical-align: middle;}
			.loading {
				display: inline-block;
				vertical-align: middle;
				position: relative;top: 1px;
				width:12px;
				height:12px;
				border:1px solid #aaa;
				border-bottom:#333333 1px solid;
				border-radius:50%;
				animation:load 1.1s infinite linear;
				-webkit-animation:load 1.1s infinite linear;
				-moz-animation:load 1.1s infinite linear;
				-o-animation:load 1.1s infinite linear;
			}
			@keyframes load{from{transform:rotate(0deg);-ms-transform:rotate(0deg);}to{transform:rotate(360deg);-ms-transform:rotate(360deg);}}
			@-webkit-keyframes load{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}}
			@-moz-keyframes load{from{-moz-transform:rotate(0deg);}to{-moz-transform:rotate(360deg);}}
			@-o-keyframes load{from{-o-transform:rotate(0deg);}to{-o-transform:rotate(360deg);}}
		}
	}
}