index.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>vue-infinite-scroll</title>
  6. </head>
  7. <body>
  8. <div class="app"
  9. style="height: 1200px;background-color: #ccc;width: 400px;margin: 0 auto;"
  10. v-infinite-scroll="loadMore"
  11. infinite-scroll-disabled="busy"
  12. infinite-scroll-distance="10">
  13. </div>
  14. <script src="https://cdn.css.net/libs/vue/2.0.3/vue.js"></script>
  15. <script src="../vue-infinite-scroll.js"></script>
  16. <script>
  17. var app = document.querySelector('.app')
  18. new Vue({
  19. el: app,
  20. data: function () {
  21. return {busy: false}
  22. },
  23. methods: {
  24. loadMore: function () {
  25. var self = this;
  26. self.busy = true;
  27. console.log('loading... ' + new Date());
  28. setTimeout(function () {
  29. var app = document.querySelector('.app')
  30. var height = app.clientHeight;
  31. app.style.height = height + 300 + 'px';
  32. console.log('end... ' + new Date());
  33. self.busy = false
  34. }, 1000)
  35. }
  36. }
  37. })
  38. </script>
  39. </body>
  40. </html>