vue【一】 实现 @scroll

<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>