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的时候,滚动条就已经到达最底部了

<template>
  <div class="container"  @scroll="handleScroll()">
  	<div class="orders-list bg-fff" v-for="(data,index) in data">
      <div class="orders-tittle clearfix plr">
        <i></i>
        <p class="left">订单号{{index}} : <span>201611170301</span></p>
        <p class="right">￥2000.00</p>
      </div>
      <div class="orders-content plr">
        <p class="orders-name"><i></i>顾客 : <span>张三{{index}}</span></p>
        <p class="orders-time"><i></i>时间 : <span>2017-3-27 09:20</span></p>
      </div>
    </div>
    <div class="load-more-gif">loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [1,2,3,4,5,6,7,8,9,10],
      scloll:true
    }
  },
  mounted () {
    this.handleScroll();
  },
  methods:{
    handleScroll(){
        //scrollTop为滚动条在Y轴上的滚动距离。
        //clientHeight为内容可视区域的高度。
        //scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
        if(this.$el.scrollTop+this.$el.offsetHeight>this.$el.scrollHeight){
          this.loadmore();
          this.scloll=true;
          this.list +=1;
        }else{
          this.scloll=false;
        }
    },
    loadmore() {
      setTimeout(() => {
        for(var i = 0; i <10; i++) {
          this.data.push(i);
        }
      }, 2000)
    }
  }
}
</script>
<style scoped src="./orders.css">

</style>

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