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>