流畅的页面过渡
使用 Swup 的 Ajax 页面过渡
使用 Ajax 驱动的、风格化的页面过渡替换完整的页面刷新 (Turbo 的替代方案)。
composer require symfony/ux-swup
// ... 隐藏 use 语句 - 点击显示
class SwupController extends AbstractController
{
private const int PER_PAGE = 4;
#[Route('/swup/{page<\d+>}', name: 'app_swup')]
public function __invoke(UxPackageRepository $packageRepository, int $page = 1): Response
{
$package = $packageRepository->find('swup');
$packages = $packageRepository->findAll();
$pages = ceil(\count($packages) / self::PER_PAGE);
if ($page < 1 || $page > $pages) {
throw $this->createNotFoundException('Page not found');
}
$results = \array_slice($packages, ($page - 1) * self::PER_PAGE, self::PER_PAGE);
return $this->render('ux_packages/swup.html.twig', [
'package' => $package,
'results' => $results,
'page' => $page,
'pages' => $pages,
]);
}
}
{% extends 'base.html.twig' %}
{% block body %}
<div data-controller="symfony--ux-swup--swup" id="swup" data-turbo="false">
<div class="PackageList">
{% for package in results %}
{{ include('components/Package/PackageListItem.html.twig', {package}) }}
{% endfor %}
</div>
<div class="mt-3">
<nav class="Pagination">
{% for num in 1..pages %}
<a href="{{ path('app_swup', num > 1 ? {page: num} : {}) }}"
aria-current="{{ page == num ? 'true' : 'false' }}">
{{ num }}
</a>
{% endfor %}
</nav>
</div>
</div>
{% endblock %}

UX Swup
Ajax 驱动的页面导航
地址栏中的 URL 更改
可自定义的过渡效果
安装它
$ composer require symfony/ux-swup