原文链接: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>