当前位置: 首页 > 工具软件 > ScrollPager > 使用案例 >

Yii2 滑动分页 ScrollPager

柴英锐
2023-12-01

原文链接:https://blog.csdn.net/wang78699425/article/details/80571863

Yii2 滑动分页 ScrollPager 的使用:

页面初始化:

<ul class="collect_goods_list">
        //ListView 参数参考:http://www.yiichina.com/doc/api/2.0/yii-widgets-listview
        <?= \yii\widgets\ListView::widget([
            'dataProvider' => $dataProvider,//Yii2数据提供器,参考:http://www.yiichina.com/doc/guide/2.0/output-data-providers
            'itemView' => '_collection_goods',//单个项目视图文件名称(即被循环输出的内容)
            'itemOptions' => ['tag' => false],//每个数据模型的渲染结果容器的HTML属性。
            'options' => ['tag' => false],//列表视图的容器标签的HTML属性。
            'layout' => '{items}{pager}',
            'emptyText' => $this->render('//layouts/empty'),//为空的显示子视图
            'pager' => [
                'class' => \kop\y2sp\ScrollPager::class,
                'triggerOffset' => 9999,//应自动加载的页数。之后,每个后续页面都会显示触发器。
                'container' => '.collect_goods_list',//容器 包含要分页的项目的元素选择器,与上面的 collect_goods_list 对应
                'item' => '.item',//单个项目(即被循环输出的内容)包含的选择器   每个项目都有的元素的选择器,确保元素在容器元素内。
                'noneLeftText' => '没有更多了~',//“没有留下”消息的文本。
                //'noneLeftTemplate' => '',//允许您覆盖“没有留下”消息html模板。
                'eventOnReady' => 'function(){lazyload_init();}',//事件,在从服务器加载新页面后触发js函数。
                'eventOnRendered' => 'function(){lazyload_init();}',//事件,新项目渲染后触发js函数。
            ]
        ]);
        ?>
</ul>

单个项目视图文件 _collection_goods 文件写法:

<li class="item"><!-- 与上面的 pager 中的 item 对应 -->
    <a href="/goods-<?= $model['goods_id']; ?>.html">
        <div class="pic"><img src="<?= $model['goods_thumb']; ?>"/></div>
        <div class="info">
            <div class="title"><?= $model['goods_name']; ?></div>
            <?php if ($model['is_delete'] == 1) { ?>
                <div class="label">失效</div> <?php } ?>
            <div class="price">¥<?= $model['shop_price']; ?></div>
        </div>
    </a>
</li>
 类似资料: