Используйте WordPress REST API и Vue JS для бесконечной прокрутки - PullRequest
Новая
       62

Используйте WordPress REST API и Vue JS для бесконечной прокрутки

0 голосов
/ 13 февраля 2020

Я хочу создать бесконечное портфолио прокрутки, чтобы начать использовать vuejs в моих проектах WordPress. Я новичок в vue, и с помощью этого кода я могу отобразить начальное содержимое портфолио, даже если оно будет немного отставать при открытии страницы. У меня проблема в том, что я не могу правильно слушать прокрутку окна, я хочу, чтобы когда пользователь достигал конца страницы, мой пользовательский метод запускался для загрузки других сообщений для отображения. Теперь он будет срабатывать при каждом свитке, что я делаю не так? Как я добавлю новые элементы в существующую сетку? 

<?php get_header(); ?>

<div class="container">
  <div class="row" id="app" style="padding:2em;margin:2em 0 0 0;" v-on:scroll="loadItems">
    <div class="card-columns">
      <div class="card" v-for="post in posts">
        <img class="card-img-top" v-bind:src="post._embedded['wp:featuredmedia'][0].source_url" />
        <h4 class="" v-html="post.title.rendered"></h4>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
(function($){
  $(document).ready(function(){

  var app = new Vue({
    el: '#app',
    data: {
      posts: []
    },
    created: function() {
      window.addEventListener('scroll',this.loadItems);
    },
    destroyed: function() {
      window.removeEventListener('scroll', this.loadItems);
    },
    mounted: function(){
      var self = this;
      console.log('mounted fired');
      $.getJSON( 'wp-json/wp/v2/posts?categories=3&page=1&per_page=10&_embed', function(data){
        console.log(data);
        self.posts = data;
      });
    },
    methods: {
      loadItems: function(){
        var canBeLoaded = true;
        bottomOffset = 2000;

          // console.log($(document).height());
          // console.log($(document).scrollTop());

          if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) ){
            console.log('loadItems method fired');
            var self = this;
            var page = 1;
            // $.ajaxSetup({
            //   beforeSend: function(){
            //     canBeLoaded = false;
            //   }
            // });
            // $.getJSON( 'wp-json/wp/v2/posts?categories=3&per_page=10&page='+page, function(data){
            //   console.log(data);
            //   page++
            //   self.posts = data;
            // });
          }

      },
    }
  });

  }); // doc ready
}(jQuery));
</script>

<?php //get_footer(); ?>

Примечание: код комментируется, потому что он генерирует ошибки, потому что функция вызывается при каждой прокрутке.

...