Задать вопрос

Как запустить infinity scroll от nivrana на yii2?

В общем суть вопроса,
Есть разметка такая :
5b8f6d2d2a050072208596.jpeg

в html это выглядит примерно так:

<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<?php $this->beginBody() ?>

<?= $this->render('content',['content' => $content]) ?>

<?php $this->endBody() ?>

</body>

</html>

<?php $this->endPage() ?>


content.php

<div id="left" class="column">
    <?= $this->render('aside') ?>
</div>

<div id="right" class="column">
    <div class="top-right">
        <?= $this->render('header') ?>
    </div>
    <div class="content">
        <?= $content ?>
    </div>
</div>


и сам вывод listview + infinityScroll от nirvana:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-12 col-lg-12">
            <?= ListView::widget([
                'id' => 'category-list-container',
                'options' => ['class' => 'category-list-container'],
                'itemOptions' => ['class' => 'item'],

                'dataProvider' => $dataProvider,
                'layout' => '{items}<div class="clearfix"></div>{pager}',
                'itemView' => '_category_item',

                'pager' => [
                    'class' => InfiniteScrollPager::className(),
                    'widgetId' => 'category-list-container',
                    'itemsCssClass' => 'category-list-container',
                    'contentLoadedCallback' => 'fook',
                    'nextPageLabel' => 'Загрузить еще',
                    'registerLinkTags' => true,
                    'linkOptions' => [
                        'class' => 'btn',
                    ],
                    'pluginOptions' => [
                        'contentSelector' => '.category-list-container',
                        'loading' => [
                            'msgText' => "<em>Новые статьи подгружаются...</em>",
                            'finishedMsg' => "<em>Извините, но вы прочитали все!</em>",
                        ],
                        'behavior' => InfiniteScrollPager::BEHAVIOR_MASONRY,
                    ],
                ],

            ]); ?>
        </div>
    </div>
</div>


Сам плагин не реагирует если использовать overflow-y: auto; У блока .content

но как только я убираю это все и listview вывожу в body и на body вешаю overflow-y: auto
то сразу начинает работать и подгрузка и все правильно.
  • Вопрос задан
  • 309 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы