Yii2 - отображение сетки с использованием расширения "ereminmdev / yii2-infinite-scroll" + afterItem и beforeItem. - PullRequest
Новая
       69

Yii2 - отображение сетки с использованием расширения "ereminmdev / yii2-infinite-scroll" + afterItem и beforeItem.

0 голосов
/ 25 октября 2018

Я застрял с некоторым кодом и собираюсь сюда сейчас ..

preview - row 1 and 2 (page 1)

preview - row 3 and 4 (page 1)

preview - row 5 (page 1) and row 1 (page 2)

Как и на изображении по ссылке выше, у меня проблема с сеткой изображений в последнем ряду страницы 1 или в первом ряду на странице 2. Изображение не зацикливаетсяФункция afterItem и beforeItem, пока работает бесконечная прокрутка.DataProvider просто дает 20 данных для каждой страницы, что означает 1 страницу 5 строк и 4 столбца, и я сохраню это и не буду увеличивать или уменьшать данные dataProvider.Так что кто-нибудь может помочь?

Вот код: 

<?= ListView::widget([
        'pager' => ['class' => \ereminmdev\yii2\infinite_scroll\InfiniteScroll::class],
        'dataProvider' => $dataProvider,
        'itemOptions' => ['class' => 'item kolom-foto'],
        'beforeItem' => function($model,$key,$index,$widget){
           if($index%4==0){
            return "<div class='baris-foto'>";
           }
        },
        'itemView' => function($model,$key,$index,$widget){
            $path = "<img class='konten-thumb' src='../$model->path'>"; 
            return $path;
        },
        'afterItem' => function($model,$key,$index,$widget){
           if(($index+1)%4==0){
            return "</div>";
           }
        }
    ])?>

, а затем здесь отрендеренный HTML: 

    <div id="w1" class="list-view"><div class="summary">Showing <b>1-20</b> of <b>24</b> items.</div>
    <div class="baris-foto">
    <div class="item kolom-foto" data-key="17"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_10-57-51.jpg"></div>
    <div class="item kolom-foto" data-key="19"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_11-09-25.jpg"></div>
    <div class="item kolom-foto" data-key="21"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_11-21-59.jpg"></div>
    <div class="item kolom-foto" data-key="22"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_11-22-21.jpg"></div>
    </div>
    <div class="baris-foto">
    <div class="item kolom-foto" data-key="23"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_11-22-38.jpg"></div>
    <div class="item kolom-foto" data-key="24"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-42-46.jpg"></div>
    <div class="item kolom-foto" data-key="25"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-46-37.jpg"></div>
    <div class="item kolom-foto" data-key="26"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-47-14.jpg"></div>
    </div>
    <div class="baris-foto">
    <div class="item kolom-foto" data-key="27"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-47-44.jpg"></div>
    <div class="item kolom-foto" data-key="28"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-48-42.jpg"></div>
    <div class="item kolom-foto" data-key="29"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-49-03.jpg"></div>
    <div class="item kolom-foto" data-key="30"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-49-42.jpg"></div>
    </div>
    <div class="baris-foto">
    <div class="item kolom-foto" data-key="31"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-50-56.jpg"></div>
    <div class="item kolom-foto" data-key="32"><img class="konten-thumb" src="../uploads/ilham-2018-Oct-19_16-54-16.jpg"></div>
    <div class="item kolom-foto" data-key="33"><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_10-52-40.jpg"></div>
    <div class="item kolom-foto" data-key="34"><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_11-13-32.jpg"></div>
    </div>
    <div class="baris-foto">
    <div class="item kolom-foto" data-key="35"><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_11-20-50.jpg"></div>
    <div class="item kolom-foto" data-key="36"><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_11-21-10.jpeg"></div>
    <div class="item kolom-foto" data-key="37"><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_11-21-20.jpg"></div>
    <div class="item kolom-foto" data-key="39"><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_11-29-27.jpg"></div>
<div class="item kolom-foto" data-key="40" style=""><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_11-30-08.jpg"></div>
<div class="item kolom-foto" data-key="41" style=""><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_13-54-17.jpg"></div>
<div class="item kolom-foto" data-key="42" style=""><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_16-55-43.jpg"></div>
<div class="item kolom-foto" data-key="43" style=""><img class="konten-thumb" src="../uploads/dummy2-2018-Oct-24_16-58-23.jpg"></div>
<div class="ias-noneleft" style="text-align: center;" id="ias_noneleft_1540435438598"></div>
    </div>

ОБНОВЛЕНИЕ: Я нашелнекоторая подсказка, индекс сбрасывается до 0 снова

enter image description here

...