ホームページ > 記事 > ウェブフロントエンド > シンプルな vue の無限ロード命令を実装する方法

シンプルな vue の無限ロード命令を実装する方法

不言オリジナル: 2018-06-29 15:55:502632ブラウズ

この記事では主に、簡単な Vue の無限ロード命令を実装する方法を紹介します。必要な方は参考にしてください。Vue のカスタム命令は、基礎となる dom で動作します。一番下までスクロールしてデータをロードし、無限ロードを実現する簡単な命令をカスタマイズする方法を紹介します。

無限ロードの原理は、スクロールするたびにスクロール距離を取得する必要があり、スクロール距離とブラウザーウィンドウの高さがコンテンツの高さ以上である場合、関数がトリガーされます。データをロードします。

まずはvueを使わずに無制限ロードを実現する方法を紹介します。

フレームなし

最初はhtml:

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<title>实现滚动加载</title>
<style>
 * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
 li, ul {
  list-style: none;
 }
 .container {
  width: 980px;
  margin: 0 auto;
 }
 .news__item {
  height: 80px;
  margin-bottom: 20px;
  border: 1px solid #eee;
 }</style>
</head>
<body>
<p class="container">
 <ul class="news" id="news">
  <li class="news__item">1、hello world</li>
  <li class="news__item">2、hello world</li>
  <li class="news__item">3、hello world</li>
  <li class="news__item">4、hello world</li>
  <li class="news__item">5、hello world</li>
  <li class="news__item">6、hello world</li>
  <li class="news__item">7、hello world</li>
  <li class="news__item">8、hello world</li>
  <li class="news__item">9、hello world</li>
  <li class="news__item">10、hello world</li>
 </ul>
</p>
</body>
</html>

ブラウザを開き、ページがスクロールできるようにブラウザウィンドウの高さを調整します。

まず3つの変数を理解してください

window.addEventListener(&#39;scroll&#39;, function() {
 var scrollTop = document.body.scrollTop;
 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
  // 触发加载数据    
  loadMore();
 }
});
function loadMore() {
 console.log(&#39;加载数据&#39;)&#39;
}

loadMore() 関数は、インターフェイスからデータを取得し、HTML を組み立て、それを元のノードの後ろに挿入することです。

// 表示列表的序号
var index = 10;
function loadMore() {
 var content = &#39;&#39;;
 for(var i=0; i< 10; i++) {
  content += &#39;<li class="news__item">&#39;+(++index)+&#39;、hello world</li>&#39;  
 }
 var node = document.getElementById(&#39;news&#39;);
 // 向节点内插入新生成的数据  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
}

これにより、無制限の読み込みが実現します。

命令を使用して vue に実装する

なぜ命令を使用して実装する必要があるのですか?命令だけが基になるDOMを取得できるようですか？無制限の読み込みを実現するには、コンテンツの高さを取得する必要があります。

まずプロジェクトを初期化し、リストを表示するコンポーネントを追加します。

// components/Index.vue
<template>
 <p>
  <ul class="news">
   <li class="news__item" v-for="(news, index) in newslist">
    {{index}}-{{news.title}}
   </li>
  </ul>
 </p>
</template>
<style>
 .news__item {
  height: 80px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
 }
</style>
<script>
 export default{
  data(){
   return{
    newslist: [
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;},
     {title: &#39;hello world&#39;}
    ]
   }
  }
 }
</script>

さて、それでは説明書を書き始めましょう。従来の実装から、スクロールイベントをリッスンし、同時にコンテンツの高さを取得するには登録する必要があることがわかりました。

directives: {
 scroll: {
  bind: function (el, binding){
   window.addEventListener(&#39;scroll&#39;, ()=> {
    if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {
     console.log(&#39;load data&#39;);
    }
   })
  }
 }
}

まず、コンポーネントにスクロールコマンドを登録し、初めてコマンドをコンポーネントにバインドするとき、つまりバインドフックに対応するときにスクロールリスナーを登録します。

フック関数は、ライフサイクルが変更されたときに呼び出される関数です。 binding は初めてコンポーネントにバインドされるときに呼び出され、unbind は命令がコンポーネントからアンバインドされるときに呼び出されます。

また、bind は関数の 2 つのパラメータ、el と binding に対応しており、これらはフック関数のパラメータです。たとえば、el はバインドされたノードに対応し、binding には渡されるパラメータなどの大量のデータが含まれています。コマンド。

以下のel.clientHeightは、バインディング命令が取得されるノードのコンテンツの高さを表します。

前と同様に、スクロールの高さとウィンドウの高さを足したものがコンテンツの高さより大きいかどうかを判断します。

コマンドをノードにバインドします:

<template>
 <p v-scroll="loadMore">
  <ul class="news">
   <li class="news__item" v-for="(news, index) in newslist">
    {{index}}-{{news.title}}
   </li>
  </ul>
 </p>
</template>

データをロードする関数である値がコマンドに渡されることがわかります:

methods: {
 loadMore() {
  let newAry = [];
  for(let i = 0; i < 10; i++) {
   newAry.push({title: &#39;hello world&#39;})
  }
  this.newslist = [...this.newslist, ...newAry];
 }
}

もちろん、ここでスクロールすると、一番下、ロードデータのみが出力されます。関数を呼び出すためにここを変更するだけです:

 window.addEventListener(&#39;scroll&#39;, ()=> { 
 if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {  
  let fnc = binding.value;  
  fnc(); 
 }
})

v-scroll="loadMore" のloadMoreはフック関数パラメータのバインディングから取得できます。

この時点で、簡単なコマンドが完了しました。

最適化

上記の例は実際にはインターフェイスからデータを取得しないため、隠れたバグがあります。インターフェイスの応答が非常に遅く、データの読み込み中に一番下までスクロールすると、わずかなスクロールでも依然としてデータの取得機能。これにより、インターフェイスが同時に複数回要求され、一度に大量のデータが返されます。

その解決策は、グローバル変数scrollDisableを追加し、データのロード関数が初めてトリガーされるときに値をtrueに設定し、この値を使用してロード関数を実行するかどうかを決定することです。

通常の実装を例に挙げます:

var scrollDisable = false;
window.addEventListener(&#39;scroll&#39;, function() {
 var scrollTop = document.body.scrollTop;
 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
  // 触发加载数据    
  if(!scrollDisable) {
   // 
   loadMore(); 
  } 
 }
});
// 表示列表的序号
var index = 10;
function loadMore() {
  // 开始加载数据，就不能再次触发这个函数了
 scrollDisable = true;
 var content = &#39;&#39;;
 for(var i=0; i< 10; i++) {
  content += &#39;<li class="news__item">&#39;+(++index)+&#39;、hello world</li>&#39;  
 }
 var node = document.getElementById(&#39;news&#39;);
 // 向节点内插入新生成的数据  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
 // 插入数据完成后  
 scrollDisable = false;
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

シンプルな vue の無限ロード命令を実装する方法

関連記事