Jscroll моментально прогружает все страницы

334
20 мая 2017, 19:28

Использую плагины jscroll, laravel mix, а так же стандартный шаблон laravel. app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
require('../../../bower_components/jscroll');
require('./infinite.scrolling');
window.Vue = require('vue');
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
    el: '#app'
});

infinite.scrolling

$(function() {
$('.articles').jscroll({
    autoTrigger: true,
    loadingHtml: 'Im load',
    padding: 0,
    nextSelector: '.pagination li.active + li a',
    contentSelector: 'div.articles',
    callback: function() {
        $('ul.pagination').remove();
    }
});

});

Метод

public function index()
{
    $articles = News::paginate(4);
    return view('news.index',['News'=>$articles]);
}

Шаблон

@extends('layouts.app')
@section('content')
    <div class="container" id="app">
        <div class="row">
            <example></example>
            <div class="articles">
                <div class="col-md-8 col-md-offset-2">
                @foreach ($News as $news)
                    <div class="panel panel-default">
                        <div class="panel-heading">Dashboard</div>
                        <div class="panel-body">
                            You are logged in!
                        </div>
                    </div>
                @endforeach
                {{ $News->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

После открытия страницы jscroll прогружает абсолютно все страницы моментально, c чем это может быть связано?

На всякий случай оставлю бутстрап

window._ = require('lodash');
/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */
try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
} catch (e) {}
/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });
Answer 1

Решил переписать код стиля, как не странно это помогло, рабочий код:

@extends('layouts.app')
@section('content')
    <div class="col-md-8 col-md-offset-2">
        <div class="articles">
            @foreach($News as $news)
                <div class="panel panel-default">
                    <div class="panel-heading"> <p>{{$news->title}}</p> </div>
                    <div class="panel-body">
                        {{$news->short_story}}
                    </div>
                    <div class="panel-footer">
                        <button class="btn btn-primary">Go to news</button>
                    </div>
                </div>
            @endforeach
            {{ $News->links() }}
        </div>
    </div>
@endsection
READ ALSO
Как узнать крайнюю левую позицию sortable?

Как узнать крайнюю левую позицию sortable?

Как у знать крайнюю левую позицию элемента при его перемещении у плагина jquery UI sorttable

196
Ошибка с методом users.get (API Вконтакте)

Ошибка с методом users.get (API Вконтакте)

Здравствуйте! Выполняю запрос к API Вконтакте, а именно, метод usersget

211
Малая галерея на странице товара

Малая галерея на странице товара

Добрый день, пытаюсь на странице организовать небольшую галерею

240