vue滚到底部加载数据

vue滚到底部加载数据

1、vue文件

@scroll="自定义"是vue自带的浏览器滚到api（）

clientHeight：内容可视区域的高度，是指页面浏览器可以看到内容的这个区域的高度，包含padding

offsetHeight：在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滚动条 + 边框
scrollHeight：这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..
在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15
在移动端，当scrollTop + offsetHeight >= scrollHeight的时候,滚动条就已经到达最底部了

2、css文件

.container{
	height: 100%;
	overflow-y: scroll;
}
.orders-list{
	height: 4.266667rem;
	border-bottom:0.05rem solid #e4e4e4;
	margin-bottom: 0.5rem;
}
.orders-tittle{
	position: relative;
	height: 1.877333rem;
	border-bottom: 0.05rem dashed #e4e4e4; 
}
.orders-tittle .left{
	height: 1.877333rem;
	line-height: 1.877333rem;
	color: #333;
	padding-left: 0.554667rem;
	font-size: 0.64rem;
}
.orders-tittle .right{
	height: 1.877333rem;
	line-height: 1.877333rem;
	color: #fe4d57;
	font-size: 0.64rem;
}
.orders-tittle i{
	position: absolute;
	width: 0.128rem;
	height: 0.682667rem;
	border-radius: 50%;
	top:50%;
	margin-top: -0.341333rem;
	background-color: #fe4d57;
}
.orders-content p{
	position: relative;
	height: 0.64rem;
	line-height: 0.64rem;
	color: #555;
	font-size: 0.554667rem;
	padding-left: 1.194667rem;
}
.orders-content .orders-name{
	margin-top: 0.426667rem;
	margin-bottom: 0.213333rem;
}
.orders-content i{
	position: absolute;
	width: 0.554667rem;
	height: 0.554667rem;
	left: 0.213333rem;
	top: 0.042667rem;
}
.orders-content .orders-name i{
	background: url(order_customer.png);
	background-size: 100% 100%;
}
.orders-content .orders-time i{
	background: url(order_time.png);
	background-size: 100% 100%;
}