4

在带有 livewire 1.3 的 laravel 7 中,当页面加载时,我通过调用 JS 函数lazyImagesInit(使用lazyload 2.0.0-rc.2)将分页和惰性图像应用于任何项目图像的列表。但是当我点击分页链接时,我会失去任何新打开的项目图像的惰性图像效果。查看缓存文件的代码,我看到使用了 gotoPage 方法:

<?php if(is_array($element)): ?>
    <?php $__currentLoopData = $element; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <?php if($page == $paginator->currentPage()): ?>
            <li class="page-item active d-none d-md-block" aria-current="page"><span class="page-link"><?php echo e($page); ?></span></li>
        <?php else: ?>
            <li class="page-item d-none d-md-block"><button type="button" class="page-link" wire:click="gotoPage(<?php echo e($page); ?>)"><?php echo e($page); ?></button></li>
        <?php endif; ?>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>

如果在调用 gotoPage 后有办法调用我的lazyImagesInit 函数?

谢谢!

4

1 回答 1

5

覆盖goToPage()组件上的方法 -

public function gotoPage($page)
{
    $this->page = $page;

    $this->emit('goToPage');
}

goToPage现在在 JavaScript 中监听事件并调用lazyImagesInit函数 -

<script>
window.livewire.on('goToPage', () => {
    lazyImagesInit();
});
</script> 
于 2020-07-27T06:46:45.337 回答