vue滚到底部加载数据
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>
.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%;
}
更多推荐
已为社区贡献7条内容
所有评论(0)