<template>
<div class="activity-wrap">
<div class="activity-list" @scroll="loadMore">
<div class="activity-item" v-for="item in activityList">
<div class="name">
<div>{{item.name}}</div>
<div>碳积分</div>
</div>
<div class="name">
<div>{{item.status}}</div>
<div>{{item.integralValue}}</div>
</div>
<div class="name">
<span>活动时间:</span>
<span>{{item.time}}</span>
</div>
<div class="name">
<div>活动承诺:</div>
<div>{{item.detail}}</div>
</div>
</div>
<p style="text-align: center;font-size: 14px;color: #5e6d82;line-height: 1.5em;" v-if="pageFlag && pageNo*10 < totalCount">加载中...</p>
<p style="text-align: center;font-size: 14px;color: #5e6d82;line-height: 1.5em;" v-if="pageNo*10 > totalCount">已经没有更多了...</p>
</div>
</div>
</template>
<script>
export default {
name: "activity",
data () {
return {
activityList: [ ],
roomsOff:true,
pageNo:1,
totalCount:0,
pageFlag:false,
courts:[],
}
},
created() {
for(var i = 1; i <= 10; i++){
this.activityList.push(
{
name:"低碳快闪"+i,
status:'进行中'+i,
integralValue:'30'+i,
time:'5.30 20:00-22:00',
detail:'活动时间内减少使用家庭大功率电器,填写户号及相应信息可活动网上国网App积分。'
}
);
this.totalCount=99;
}
},
methods: {
loadMore(e){
console.log("========================="+this.pageNo)
console.log(this.pageNo*10)
console.log(e.target.scrollHeight - e.target.scrollTop-e.target.offsetHeight)
if(e.target.scrollHeight - e.target.scrollTop-e.target.offsetHeight <= 150){
if(this.pageFlag){
return
}
if(this.pageNo*10 > this.totalCount){
return
}
// this.pageFlag = true;
this.pageNo++;
for(var i = 1; i <= 10; i++){
this.activityList.push(
{
name:"低碳快闪"+i,
status:'进行中'+i,
integralValue:'30'+i,
time:'5.30 20:00-22:00',
detail:'活动时间内减少使用家庭大功率电器,填写户号及相应信息可活动网上国网App积分。'
}
);
this.pageFlag = false
}
}
}
}
}
</script>
<style scoped lang="less">
html,body{
height:100%
}
.activity-wrap{
width: 90%;
margin: auto;
height: 100% ;
.activity-list{
height: 100% ;
overflow-y: scroll;
.activity-item{
width: 90%;
background: #0b9494;
border-radius: 15px;
border: 1px solid;
margin: 5px auto;
}
}
}
</style>
vue【一】 实现 @scroll
于 2021-05-15 16:34:40 首次发布