流畅的页面过渡

使用 Swup 的 Ajax 页面过渡

使用 Ajax 驱动的、风格化的页面过渡替换完整的页面刷新 (Turbo 的替代方案)。

composer require symfony/ux-swup
// ... 隐藏 use 语句 - 点击显示
use App\Service\UxPackageRepository; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\Routing\Attribute\Route;

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 %}
Symfony logo

UX Swup

Ajax 驱动的页面导航
地址栏中的 URL 更改
可自定义的过渡效果

安装它

$ composer require symfony/ux-swup