美文网首页vue
用vue实现无限滚动

用vue实现无限滚动

作者: 恬雅过客 | 来源:发表于2018-06-24 11:43 被阅读2次

    译文:https://alligator.io/vuejs/implementing-infinite-scroll/

    无限滚动在网络上占有一席之地,但它不适用于每个网站或应用程序。当用户需要加载大量数据或图像时,但又不想一次性加载完所有数据和图像时,它们特别有用。 Twitter,Facebook和Instagram等社交媒体多年来一直在推广。在您的网站或应用程序中集成自己的无限滚动比您想象的要容易。

    本文将使用 Random User API(模拟后端返回数据)。该API将自己形容为“像Lorem Ipsum,但是对于人”。它不仅适用于此实现,而且对于模仿未来项目的用户配置文件也非常有用。

    在你开始前,用 Vue CLI webpack-simple项目模板创建一个新的 Vue.js 项目。此例子将分别用 AxiosMomentJS 来获取数据和日期格式。

    $ vue init webpack-simple infinite-scroll-vuejs

    获取初始用户数据

    有各种实现无限滚动的 npm 包,你可以使用你的 Vue 应用程序,但其中一些可能是太繁琐了。此文中,我们将不用那些插件或包,仅仅编写一个简单的 JavaScript 函数来实现无限滚动功能(当滚动到浏览器窗口底部时,获取一组新数据)。

    在我们开始集成无限滚动之前,让我们在页面加载中获取并设置一些初始数据:

    App.vue

    data () {
      return {
        persons: []
      }
    },
    methods: {
      getInitialUsers () {
        for (var i = 0; i < 5; i++) {
          axios.get(`https://randomuser.me/api/`)
            .then(response => {
              this.persons.push(response.data.results[0]);
            });
        }
      }
    },
    beforeMount() {
      this.getInitialUsers();
    }
    

    注意:

    Random User API 一次只会返回一个随机用户数据,为了获得5个用户数据,需要发起五次请求。

    如果您在 console 看到了五个用户数据,那就OK了!让我们通过模板中的这些数据进行迭代,然后继续:

    App.vue

    <template>
      <div id="app">
        <h1>Random User</h1>
        <div class="person" v-for="person in persons">
          <div class="left">
            <img :src="person.picture.large">
          </div>
          <div class="right">
            <p>{{ person.name.first }} {{ person.name.last }}</p>
            <ul>
              <li>
                <strong>Birthday:</strong> {{ formatDate(person.dob) }}
              </li>
              <li class="text-capitalize">
                <strong>Location:</strong> {{ person.location.city }},
                {{ person.location.state }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    ...
    </script>
    
    <style lang="scss">
     /* Optional Styles */
     .person {
        background: #ccc;
        border-radius: 2px;
        width: 20%;
        margin: 0 auto 15px auto;
        padding: 15px;
    
        img {
          width: 100%;
          height: auto;
          border-radius: 2px;
        }
    
        p:first-child {
          text-transform: capitalize;
          font-size: 2rem;
          font-weight: 900;
        }
    
        .text-capitalize {
          text-transform: capitalize;
        }
      }
    </style>
    

    实现无限滚动逻辑

    现在你在此的目的......无限的滚动! 在组件的方法中,您需要创建一个名为scroll()的新函数,并将其加载到mounted()生命周期方法中。

    这个scroll()方法应该有一个简单的条件来计算页面的底部,判断它为true或false,并执行一些操作。我们将利用文档对象的documentElement.scrollTopdocumentElement.offsetHeight属性和窗口的innerHeight属性来确定是否滚动到底部:

    window.onscroll = () => {
      let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
    
      if (bottomOfWindow) {
        // Do something, anything!
      }
    };
    

    在这种情况下,让我们添加一个GET方法,使用Axios从随机用户API中获取另一个随机用户。

    methods: {
      ...,
      scroll (person) {
        window.onscroll = () => {
          let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
    
          if (bottomOfWindow) {
            axios.get(`https://randomuser.me/api/`)
              .then(response => {
                person.push(response.data.results[0]);
              });
          }
        };
      },
    },
    mounted() {
      this.scroll(this.person);
    }
    

    此功能只会在用户滚动到页面底部时发起服务请求,并向人员数组添加一个新的随机“用户”。此时,您应该可以无限滚动...并每次看到新的“用户”。

    结尾

    无限滚动听起来吓人,但如所证明的那样,它非常简单。每次滚动到页面的底部时,我们都会使用 Axios 获取新数据,然后将这些数据推送到数组中。要延迟加载图像,只需将图像源推送到数据数组,在模板中遍历它,然后将<img:src ="">绑定到数组。

    ps: 此文核心就在【判断是否滚动到页面底部的逻辑上】,在此提供一个兼容性更好的写法,参考此文滚动到底部加载更多

    相关文章

      网友评论

        本文标题:用vue实现无限滚动

        本文链接:https://www.haomeiwen.com/subject/hyvjyftx.html