通过ScrollRect和Grid实现菜单的左右滑动效果

 

设置ScrollRcet的Width和Hieght，使得要显示的内容不会被挡住。

设置ScrollRcet的MoveMent  Type为Clamped，这样左右滑动菜单时，不会显示不想看到的拉伸的背景图。

设置ScrollRcet的射线检测，勾掉并勾掉不想显示的其他辅助Image的射线检测，这样才不会干扰屏幕的触摸效果。如果不勾掉，则那些辅助Image会干扰我们触摸操作。

ScrollRcet上不添加Image组件，而是把image放在ScrollRcet下面，及作为ScrollRcet的子物体，这样复制多个ScrollRcet，才不会出错。

注意设置Grid的Width和Height及其位置。以及下面的菜单image和菜单后面的其他Imagede 大小和位置.

以上就是我实现手机端滑动菜单的过程。

 

 

主要脚本：
  //--------------------------------------------当手动滑动Scroll时，菜单界面的伸缩键位置随之移动--------------------------------------------------//
    public void Grid_MenuFMJZBtn() //MainMenuScroll
    {
        if (Grid_MenuFMJZ.GetComponent<RectTransform>().anchoredPosition.x < 180)
        {
            MenuBackBtn[0].transform.Find("Image").GetComponent<Image>().sprite = Menu_Img;
            isMenuFMJZ = false;


        }
        else if (Grid_MenuFMJZ.GetComponent<RectTransform>().anchoredPosition.x > 400)
        {
            MenuBackBtn[0].transform.Find("Image").GetComponent<Image>().sprite = Menu_Down_Img;
            isMenuFMJZ = true;


        }
    }
    public void Grid_MenuSSLCBtn() //MenuSSLCScroll
    {
        if (Grid_MenuSSLC.GetComponent<RectTransform>().anchoredPosition.x < 180)
        {
            MenuBackBtn[1].transform.Find("Image").GetComponent<Image>().sprite = Menu_Img;
            isMenuSSLC = false;


        }
        else if (Grid_MenuSSLC.GetComponent<RectTransform>().anchoredPosition.x > 400)
        {
            MenuBackBtn[1].transform.Find("Image").GetComponent<Image>().sprite = Menu_Down_Img;
            isMenuSSLC = true;


        }
    }
    public void Grid_MenuSJQHBtn() //MenuSJQHScroll
    {
        if (Grid_MenuSJQH.GetComponent<RectTransform>().anchoredPosition.x < 180)
        {
            MenuBackBtn[2].transform.Find("Image").GetComponent<Image>().sprite = Menu_Img;
            isMenuSJQH = false;


        }
        else if (Grid_MenuSJQH.GetComponent<RectTransform>().anchoredPosition.x > 400)
        {
            MenuBackBtn[2].transform.Find("Image").GetComponent<Image>().sprite = Menu_Down_Img;
            isMenuSJQH = true;


        }
    }
    public void Grid_MenuYCCKBtn() //MenuYCCKScroll
    {
        if (Grid_MenuYCCK.GetComponent<RectTransform>().anchoredPosition.x < 180)
        {
            MenuBackBtn[3].transform.Find("Image").GetComponent<Image>().sprite = Menu_Img;
            isMenuYCCK = false;


        }
        else if (Grid_MenuYCCK.GetComponent<RectTransform>().anchoredPosition.x > 400)
        {
            MenuBackBtn[3].transform.Find("Image").GetComponent<Image>().sprite = Menu_Down_Img;
            isMenuYCCK = true;


        }
    }