vue 列表滑动加载数据

• 这个组件使用了http://fontawesome.dashgame.com/ 的loading的效果

//main.js 入口文件

import axios from 'axios'
// Vue.prototype.axios = axios 组件调用this.axios.get(...)
// Vue.prototype.$ajax = axios  换个名字 组件调用this.$ajax.get(...)
window.axios = axios;  //组件中调用 axios.get(...)

//loadmore.vue 组件（我配置的是sass语法，望悉知！！）

<template>
  <div class="loadmore">

    <header class="header">滑动-加载更多</header>

    <ul class="ul">
      <li class="list" v-for="(item,index) in list">
        <div class="list-left">{{index + 1}}</div>
        <div class="list-center">
          <div class="msg">{{item.title}}</div>
          <div class="time">时间：{{item.create_at}}</div>
          <div class="author">作者：{{item.author.loginname}}</div>
        </div>
      </li>
    </ul>

    <div class="loadmore-icon">加载更多<i class="fa fa-cog fa-spin"></i></div>
    <div class="loading" v-show="showlaoding">
      <i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
    </div>

  </div>
</template>
<script>

  export default {
    name: 'loadmore2',
    data() {
      return {
        list: [],//数据
        page: 1,//页码
        showlaoding: true //是否显示loading效果
      }
    },
    methods: {
      getData(page) {
        this.showlaoding = true
        axios.get('https://cnodejs.org/api/v1/topics', {
          params: {
            page: page,
            limit: 10
          }
        })
          .then((res) => {
            if (res.status == 200) {
              let list = res.data.data
              list.map(n => this.list.push(n))
              this.list.forEach(n => {
                const d = new Date(n.create_at)
                n.create_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
              })
              this.showlaoding = false

            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
    }
    ,
    mounted() {
      this.getData(this.page);


      // 注册scroll事件并监听
      window.addEventListener('scroll', () => {
        console.info('可视区域大小' + document.documentElement.clientHeight + '........' + window.innerHeight)
        //console.info('滚动高度' + document.body.scrollTop) //原生的方法存在的兼容性问题 mac上面就计算出来是0
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

        console.info('文档高度' + document.body.offsetHeight)

        //判断是否滚动到底部
        if (scrollTop + window.innerHeight + 0>= document.body.offsetHeight) { //0 表示距离底部多少的距离的开始触发loadmore效果
          if (!this.showlaoding) { //防止多次加载
            this.getData(this.page += 1)
          }
        }
      })

    }
／／原生的方法存在浏览器兼容的问题的，最好的办法就是的是jq大法，不需要考虑的兼容新的问题的

  }
</script>
<style lang="scss" scoped>
  .loadmore {
    min-height: 100vh;
    width: 100%;
    padding-top: 0.8rem;
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: green;
    color: #ffffff;
    font-size: 0.32rem;
  }

  .ul {
    width: 100%;
  }

  .list {
    padding: 0.3rem;
    display: flex;
    position: relative;
    &:last-child {
      &:after {
        display: none;
      }
    }
    &:after {
      content: '';
      display: block;
      left: 0.3rem;
      right: 0;
      bottom: 0;
      background-color: #dfdfdf;
      height: 1px;
      width: 100%;
      position: absolute;
    }
    .list-left {
      width: 0.5rem;
    }
    .list-center {
      flex: 1;
      padding-left: 0.2rem;
      margin-right: 0.5rem;
      .msg {
        font-size: 0.3rem;
        font-weight: 900;
      }
      .author {
        margin-top: 0.1rem;
      }
      .time {
        margin-top: 0.1rem;
      }
    }
  }

  .loadmore-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
    padding: 0.2rem 0;
  }

  .loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(#000, .3);
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>