untiy用Scroll View实现划页效果（配图极多）

untiy用Scroll View实现划页效果（配图极多）

一、实现的效果
1、使用panel存放所有的内容，用按钮显示和隐藏panel
2、可以鼠标划页和按钮划页
3、一点点小细节

最终差不多这个样子

---

一、前期准备

1、创建一个panel和一个按钮，用来存放scroll view 和控制panel的显示隐藏，然后调整一下按钮的位置。注意在Hierarchy面板中将panel放在button上面。
2、在panel中创建脚本组件，叫什么名称都行，里面粘贴下面的代码，代码非常简单是控制panel的显示和隐藏，注意脚本名称别忘记修改成你设置的。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// 挂载到panel面板
// 设置面板的显示和隐藏
public class PanelSetting : MonoBehaviour
{
    bool isShow;
    public GameObject Panel;
    void Start()
    {
        isShow = false;
        Panel.SetActive(isShow);
    }
    public void openPanel()
    {
        if (!isShow) Panel.SetActive(true);
        else Panel.SetActive(false);
        isShow = !isShow;
    }
}

3、回到unity中给panel关联

4、按钮调用panel脚本组件的openPanel方法。

5、完成、测试是否可以显示隐藏panel。

二、添加scroll view和页面按钮

1、在panel下创建scroll view和五个按钮，并调整位置
2、在scroll view 》 viewport 》content 》建立五个image图片作为想要切换的页面，并添加不同的颜色便于区分
3、在content中添加两个组件。

4、可以通过viewport的显示隐藏遮罩来查看排列情况。

5、panel下建立新脚本SliderControl，控制鼠标滑动和按钮点击。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class SliderControl : MonoBehaviour
{
    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()
    {
        mNeedMove = false;
    }

    //鼠标滑动
    public void OnPointerUp()
    {
        // 判断当前位于哪个区间，设置自动滑动至的位置
        if (m_Scrollbar.value <= 0.125f)
        {
            mTargetValue = 0;
        }
        else if (m_Scrollbar.value <= 0.375f)
        {
            mTargetValue = 0.25f;
        }
        else if (m_Scrollbar.value <= 0.625f)
        {
            mTargetValue = 0.5f;
        }
        else if (m_Scrollbar.value <= 0.875f)
        {
            mTargetValue = 0.75f;
        }
        else
        {
            mTargetValue = 1f;
        }

        mNeedMove = true;
        mMoveSpeed = 0;
    }

    //按钮点击
    public void OnButtonClick(int value)
    {
        switch (value)
        {
            case 1:
                mTargetValue = 0;
                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)
        {
            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);
        }
    }

}

6、
7、Scroll View添加组件Event Trigger》add new…》PointerUP》+号》panel拉入到None（Object）
8、设置五个按钮，注意五个都设置，值分别为12345.

9、此时已经基本完成，可以游戏视图测试一下鼠标拖动和按钮点击是否会滑动，如果有问题，按照上面图片查找是否有错误。

3、收尾工作

收尾无非就是按钮选中颜色和去掉纵向滚动条等，取消panel的默认透明背景色等，都非常简单，就不截图了。
1、关闭纵向滚动条，在scroll view的scroll rect组件取消勾选vertical
2、按钮选中，将五个按钮的selected颜色修改
3、取消背景色，将panel的image颜色透明度修改为0。
4、取消页面背景色，将scroll view的image组件背景色修改为0
5、隐藏横线滚动条，选中Scrollbar Horizontal，拖动到显示区域外。