Comment implémenter le défilement en chargeant plus de fonctions dans vue

Cet article vous apporte principalement un exemple de chargement roulant dans vue. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Dans l'ère précédente de l'agriculture sur brûlis frontale, nous voulions implémenter le chargement roulant pour plus. Je voulais que tout le monde l'implémente rapidement, mais ce serait un peu gênant dans Vue récemment. je l'ai étudié moi-même et j'ai fait une démo simple pour tout le monde. Référence :

<template>
  <p>
    <ul>
      <li v-for="item in articles">
        <h2>{{item.title}}</h2>
        <img :src="item.images" alt="">
      </li>
    </ul>
  </p>
</template>
<script>
  import axios from &#39;axios&#39;;
  export default{
    data(){
      return {
        articles : []
      }
    },
    mounted(){
      // 缓存指针
      let _this = this;
      // 设置一个开关来避免重负请求数据
      let sw = true;
      // 此处使用node做了代理
      axios.get(&#39;http://localhost:3000/proxy?url=http://news-at.zhihu.com/api/4/news/latest&#39;)
        .then(function(response){
          // console.log(JSON.parse(response.data).stories);
          // 将得到的数据放到vue中的data
          _this.articles = JSON.parse(response.data).stories;
        })
        .catch(function(error){
          console.log(error);
        });

      // 注册scroll事件并监听
      window.addEventListener(&#39;scroll&#39;,function(){
        // console.log(document.documentElement.clientHeight+&#39;-----------&#39;+window.innerHeight); // 可视区域高度
        // console.log(document.body.scrollTop); // 滚动高度
        // console.log(document.body.offsetHeight); // 文档高度
        // 判断是否滚动到底部
        if(document.body.scrollTop + window.innerHeight >= document.body.offsetHeight) {
          // console.log(sw);
          // 如果开关打开则加载数据
          if(sw==true){
            // 将开关关闭
            sw = false;
            axios.get(&#39;http://localhost:3000/proxy?url=http://news.at.zhihu.com/api/4/news/before/20170608&#39;)
              .then(function(response){
                console.log(JSON.parse(response.data));
                // 将新获取的数据push到vue中的data，就会反应到视图中了
                JSON.parse(response.data).stories.forEach(function(val,index){
                  _this.articles.push(val);
                  // console.log(val);
                });
                // 数据更新完毕，将开关打开
                sw = true;
              })
              .catch(function(error){
                console.log(error);
              });  
          }
        }
      });
    }
  }
</script>
<style lang="less">
  *{
    margin:0;
    padding:0;
  }
  li{
    list-style:none;
  }
</style>

L'effet approximatif est le suivant

<.>Bien sûr, ce n'est qu'une démo pour le moment, il existe de meilleures solutions. Chacun peut ajouter ses propres méthodes.

Recommandations associées :

Angularjs charge par roulement plus de données

Réalisez un chargement par roulement

méthode de chargement de données glissantes jquery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!