Yii2在一个页面中有多个ListView

时间:2018-09-01 04:33:02

标签: yii2 yii2-advanced-app

我在一页中使用2个widgets,两个都在使用listview,一个用于博客,另一个用于页面,都在使用ScrollPager。我想分别分别显示更多 button。问题是“显示更多”按钮仅显示在页面上,而没有显示在博客上,如果我删除页面小部件,它将显示在博客上。我正在尝试为页面显示更多和为博客显示更多。我尝试过pageParam,但问题仍然存在。

小工具

class UserPagesWidget extends \yii\base\Widget
{
    public $usr_id;

    public function run()
    {
        $dataProviderContent = new ActiveDataProvider([
            'query' =>  Post::find()->Where(['user_id' => $this->usr_id])
                    ->orderBy(['post_crdate' => SORT_DESC]),
            'pagination' => [
                'pageParam' => 'contentPagination',
                'pageSize' => 5,
            ],
        ]);

        return $this->render('/user/widget/pstList', [
            'dataProviderContent' => $dataProviderContent,
            ]);
    }
}

渲染文件

<?= ListView::widget([
    'dataProvider' => $dataProviderContent,
    'summary'=>'',
    'itemOptions' => ['class' => 'item'], // LY - FOR ( LOAD MORE )
    'emptyText' => 'No Content',
    'itemView' => function ($model, $key, $index, $widget) {
                    return $this->render('/user/profileContent/usr-pst-content',['model' => $model]);
                },
    'pager' => ['class' => \kop\y2sp\ScrollPager::className()],
    ]);
?>

博客小工具

class UserBlogsWidget extends \yii\base\Widget
{
    public $usr_id;

    public function run()
    {
        $dataProviderBlog = new ActiveDataProvider([
            'query' =>  Blog::find()->Where(['user_id' => $this->usr_id])
                ->orderBy(['blog_update' => SORT_DESC]),
                'pagination' => [
                'pageParam' => 'blogPagination',
                'pageSize' => 6,
            ],
        ]);

        return $this->render('/user/widget/blgList', [
            'dataProviderBlog' => $dataProviderBlog,
        ]);
    }
}

博客渲染文件

<?= ListView::widget([
    'dataProvider' => $dataProviderBlog,
        'summary'=>'',
        'itemOptions' => ['class' => 'item'], // LY - FOR ( LOAD MORE )
        'emptyText' => 'No Blogs',
        'itemView' => function ($model, $key, $index, $widget) {
                        return $this->render('/user/profileContent/usr-blg-content',['model' => $model]);
                    },
        'pager' => ['class' => \kop\y2sp\ScrollPager::className()],
    ]);
?>

两个小部件都在一个视图文件中调用。

<div class="row chn-row">
    <div class="col-sm-12" style="padding:15px">
        <!-- separing -->
        <?= UserPagesWidget::widget(['usr_id' => $model->user_id]) ?>

        <!-- separing -->   
    </div>

    <div class="col-sm-12" style="padding:15px">
        <?= UserBlogsWidget::widget(['usr_id' => $model->user_id]) ?>
    </div>
</div>

问题是显示更多 button仅显示页面。

1 个答案:

答案 0 :(得分:1)

您需要调整选择器以区分两个小部件。默认情况下,ScrollPager使用一些将与所有列表视图匹配的通用选择器(.list-view)。您应该为ListView小部件明确设置ID,并在ScrollPager配置中将其用作小部件初始化的选择器。

<?= ListView::widget([
    // ...
    'dataProvider' => $dataProviderBlog,
    'options' => ['id' => 'blog-list-view'],
    'pager' => [
        'class' => \kop\y2sp\ScrollPager::className(),
        'container' => '#blog-list-view',
        'paginationSelector' => '#blog-list-view .pagination',
    ],
]) ?>
<?= ListView::widget([
    // ...
    'dataProvider' => $dataProviderContent,
    'options' => ['id' => 'content-list-view'],
    'pager' => [
        'class' => \kop\y2sp\ScrollPager::className(),
        'container' => '#content-list-view',
        'paginationSelector' => '#content-list-view .pagination',
    ],
]) ?>

请参见https://kop.github.io/yii2-scroll-pager/#general-options