Unity UGUI 實現滑頁效果完整教程：從零打造流暢分頁體驗

編輯：關於C語言

前言

在 Unity 專案開發中，滑頁（分頁滑動）是常見的 UI 需求，無論是新手引導、圖片輪播還是功能頁面切換，都需要流暢、自然的翻頁體驗。本教程將手把手教你利用 UGUI 的 ScrollRect 與 Scrollbar 組件，結合簡單的腳本邏輯，實現「一頁一頁」精準吸附的滑頁效果。

核心原理

利用 ScrollRect 提供的基礎拖拽滑動能力，搭配 Scrollbar 監聽滑動進度。當使用者釋放手指時，腳本根據當前滾動條的 value（0~1 區間）判斷最接近的頁面索引，再以 Mathf.SmoothDamp 平滑插值滾動至目標頁面，實現「磁吸式」翻頁。

場景搭建步驟

1. 建立雙層 Panel 架構

在 Canvas 下建立兩個 Panel：TopPanel（顯示區）與 BottomPanel（指示器/按鈕區）。

雙層 Panel 結構

2. 為 TopPanel 掛載 ScrollRect

選中 TopPanel，Add Component → Scroll Rect。取消勾選 Horizontal，保留 Vertical（或依需求相反），並將 Movement Type 設為 Clamped 或 Elastic。

ScrollRect 設定

3. 建立內容容器

在 TopPanel 下新建一個 Panel 命名為 Content，將所有頁面內容（圖片、文字等）作為其子物件橫向排列。將此 Content 拖入 ScrollRect 的 Content 欄位。

Content 容器

4. 加入 Scrollbar 並關聯

右鍵空白處 → UI → Scrollbar，建立水平滾動條。將其掛載到 ScrollRect 的 Horizontal Scrollbar 欄位，並將 Direction 設為 Left To Right。

Scrollbar 建立
Scrollbar 設定
關聯 ScrollRect

5. 微調 ScrollRect 參數

Deceleration Rate：建議 0.135（預設），讓手指釋放後自然減速。
Scroll Sensitivity：依解析度調整，通常 1.0 即可。
取消 Inertia 若不想要慣性滑動，保留則更自然。

6. 掛載控制腳本與綁定事件

將下方提供的 SliderControl 腳本掛載到 TopPanel，並將 Scrollbar、ScrollRect 拖入對應欄位。為底部 5 個指示按鈕分別添加 OnButtonClick(int index) 事件，傳入 1~5。

腳本掛載
按鈕事件綁定

核心腳本：SliderControl.cs

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;

public class SliderControl : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    public Scrollbar m_Scrollbar;
    public ScrollRect m_ScrollRect;

    private float mTargetValue;
    private bool mNeedMove = false;
    private const float MOVE_SPEED = 1f;
    private const float SMOOTH_TIME = 0.2f;
    private float mMoveSpeed = 0f;

    // 按下時停止自動吸附
    public void OnPointerDown(PointerEventData eventData) => mNeedMove = false;

    // 抬起時計算目標頁面並啟動平滑移動
    public void OnPointerUp(PointerEventData eventData)
    {
        float v = m_Scrollbar.value;
        if (v <= 0.125f) mTargetValue = 0f;
        else if (v <= 0.375f) mTargetValue = 0.25f;
        else if (v <= 0.625f) mTargetValue = 0.5f;
        else if (v <= 0.875f) mTargetValue = 0.75f;
        else mTargetValue = 1f;

        mNeedMove = true;
        mMoveSpeed = 0f;
    }

    // 底部按鈕直接跳轉
    public void OnButtonClick(int pageIndex)
    {
        switch (pageIndex)
        {
            case 1: mTargetValue = 0f; break;
            case 2: mTargetValue = 0.25f; break;
            case 3: mTargetValue = 0.5f; break;
            case 4: mTargetValue = 0.75f; break;
            case 5: mTargetValue = 1f; break;
            default: Debug.LogError("頁面索引超出範圍"); break;
        }
        mNeedMove = true;
    }

    void Update()
    {
        if (!mNeedMove) return;

        if (Mathf.Abs(m_Scrollbar.value - mTargetValue) < 0.01f)
        {
            m_Scrollbar.value = mTargetValue;
            mNeedMove = false;
            return;
        }

        m_Scrollbar.value = Mathf.SmoothDamp(m_Scrollbar.value, mTargetValue, ref mMoveSpeed, SMOOTH_TIME);
    }
}