unity 利用Scroll View实现滑动翻页效果

这篇具有很好参考价值的文章主要介绍了unity 利用Scroll View实现滑动翻页效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.在Hierarchy视图右键创建UI->Scroll View。

unity scrollview 滑动事件,unity,游戏引擎,c#

Scrollbar可根据自己需求选择是否删除,我这里制作的翻页日历用不上我就删除了。

unity scrollview 滑动事件,unity,游戏引擎,c#

connect节点挂上Grid Layout Group组件,参数属性可参考unity API。

unity scrollview 滑动事件,unity,游戏引擎,c#

unity scrollview 滑动事件,unity,游戏引擎,c#

unity scrollview 滑动事件,unity,游戏引擎,c#

下面是具体实现代码

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using System.Collections.Generic;
using UnityEngine.EventSystems;
using System;

public class PageView : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{

    private ScrollRect rect;                        //滑动组件  
    private float targethorizontal = 0;             //滑动的起始坐标  
    private bool isDrag = false;                    //是否拖拽结束  
    private List<float> posList = new List<float>();//求出每页的临界角,页索引从0开始  
    private int currentPageIndex = -1;
    public Action<int> OnPageChanged;
    public RectTransform content;
    private bool stopMove = true;
    public float smooting = 2;                      //滑动速度  
    public float sensitivity = 0.3f;
    private float startTime;

    private float startDragHorizontal;
    public Transform toggleList;

    void Start()
    {
        rect = transform.GetComponent<ScrollRect>();
        var _rectWidth = GetComponent<RectTransform>();
        var tempWidth = ((float)content.transform.childCount * _rectWidth.rect.width);
        content.sizeDelta = new Vector2(tempWidth, _rectWidth.rect.height);

        //未显示的长度
        float horizontalLength = content.rect.width - _rectWidth.rect.width;
        for (int i = 0; i < rect.content.transform.childCount; i++)
        {
            posList.Add(_rectWidth.rect.width * i / horizontalLength);
        }
    }

    void Update()
    {
        if (!isDrag && !stopMove)
        {
            startTime += Time.deltaTime;
            float t = startTime * smooting;

            float temp = Mathf.SmoothStep(0, 1, t);
            rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, temp);
            if (t >= 1)
                stopMove = true;
        }
    }

    public void ScrollToPage(int index, bool immediately = false)
    {
        if (index >= 0 && index < posList.Count)
        {
            if (immediately)
            {
                rect.horizontalNormalizedPosition = posList[index];
            }
            else
            {
                targethorizontal = posList[index]; //设置当前坐标,更新函数进行插值  
                isDrag = false;
                startTime = 0;
                stopMove = false;
            }

            SetPageIndex(index);
        }
    }

    public int GetPageCount()
    {
        return posList.Count;
    }

    private void SetPageIndex(int index)
    {
        if (currentPageIndex != index)
        {
            currentPageIndex = index;
            if (OnPageChanged != null)
                OnPageChanged(index);
        }
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
        //开始拖动
        startDragHorizontal = rect.horizontalNormalizedPosition;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        float posX = rect.horizontalNormalizedPosition;
        posX += ((posX - startDragHorizontal) * sensitivity);
        posX = posX < 1 ? posX : 1;
        posX = posX > 0 ? posX : 0;
        int index = 0;
        float offset = Mathf.Abs(posList[index] - posX);

        for (int i = 1; i < posList.Count; i++)
        {
            float temp = Mathf.Abs(posList[i] - posX);
            if (temp < offset)
            {
                index = i;
                offset = temp;
            }
        }
        SetPageIndex(index);
        targethorizontal = posList[index]; //设置当前坐标,更新函数进行插值  
        isDrag = false;
        startTime = 0;
        stopMove = false;
    }

}

 onLeft和onRight绑定左右翻页按钮事件

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

public class GameController : MonoBehaviour
{
    //[SerializeField]
    //private Text pageNumber;
    //[SerializeField]
    //private InputField inputField;
    //[SerializeField]
    private PageView pageView;

    private int curPage = -1;

    
    void Start()
    {
        //pageNumber.text = string.Format("当前页码:0,总共页数: {0}", pageView.GetPageCount());
        //pageView.OnPageChanged = pageChanged;

        //pageView.ScrollToPage(0, true);
    }

    void pageChanged(int index)
    {
        //pageNumber.text = string.Format("当前页码:{0}, 总共页数: {1}", index.ToString(), pageView.GetPageCount());
        //curPage = index;
    }
    
   //翻到某页
    public void SetPageIndex(int index)
    {
        pageView.ScrollToPage(index);
    }
    public void onClick()
    {
        //try
        //{
        //    int idnex = int.Parse(inputField.text);
        //    pageView.ScrollToPage(idnex);
        //}
        //catch (Exception ex)
        //{
        //    Debug.LogWarning("请输入数字" + ex.ToString());
        //}
    }

    void Destroy()
    {
        pageView.OnPageChanged = null;
    }

    public void onLeftClick()
    {
        curPage--;
        if(curPage < 0) curPage = 0;
        pageView.ScrollToPage(curPage);
    }

    public void onRightClick()
    {
        curPage++;
        if(curPage >= pageView.GetPageCount()) curPage = pageView.GetPageCount()-1;
        pageView.ScrollToPage(curPage);
    }
}

 文章来源地址https://www.toymoban.com/news/detail-824562.html

到了这里,关于unity 利用Scroll View实现滑动翻页效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android——使用ScrollView实现滚动效果,当内容超出屏幕范围时自动滑动显示

    Android——使用ScrollView实现滚动效果,当内容超出屏幕范围时自动滑动显示 ScrollView是Android中常用的布局容器,用于在屏幕空间有限的情况下实现内容的滑动显示。当内容超出屏幕范围时,用户可以通过滑动屏幕来查看更多内容,提供了更好的用户体验。 在Android中,使用Sc

    2024年01月16日
    浏览(47)
  • 小程序 view下拉滑动导致scrollview滑动事件失效

    下拉时滑动,展示整个会员卡内容, 下拉view里包含了最近播放:有scrollview,加了下拉功能后,scrollview滑动失败了。     问题所在:父元素使用了touchstart,touchmove,touchend三个事件,导致作为子元素的scroll-view组件无法滑动 解决办法:父元素绑定touchstart事件时不要使用catch绑

    2024年02月14日
    浏览(41)
  • 【小程序】小程序如何实现滑动翻页(类似刷短视频的交互效果)

    在微信小程序中实现上下滑动翻页的效果其实非常简单,可以说一学就会。 这篇文章将非常详细地教大家如何实现这一交互: 首先我们在 Page 的 data 属性中添加两个变量: 其中 biases 是个数组,我们要实现的效果就是每次展示 biases 的一个元素,上划切换到上一个元素,下划

    2024年02月10日
    浏览(40)
  • 微信小程序实现锚点效果 scroll-view的scroll-into-view属性

    小程序中实现锚点效果,可以直接使用scroll-view的scroll-into-view属性就可以实现锚点效果,比较方便简单。那么需要用到scroll-view那些参数呢,下面具体讲讲: scroll-x | scroll-y:设置滚动刚想 scroll-into-view:子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动

    2024年02月13日
    浏览(43)
  • [uniapp] scroll-view 简单实现 u-tabbar效果

    效果图 方案 官方scroll-view 进行封装 配合属性 scroll-left Number/String 设置横向滚动条位置 即可 scroll-into-view 属性尝试过,方案较难实现 踩坑 1.scroll-view 横向失败 安装官网的解释 使用竖向滚动时,需要给 scroll-view 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给scr

    2024年02月11日
    浏览(34)
  • uniapp实战仿写网易云音乐(三)—视频页面(scroll-view组件实现横线滑动,mescroll-uni实现视频列表,向下滑动刷新当前页面)

    接着上篇文章继续完成剩下的部分,本篇文章是完成第二个页面——视频页面的部分,视频还是没有做播放的效果,主要是做展示效果。下面附上两篇文章链接,没看过的同学可以回头看看: uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现 uniapp实战仿写

    2023年04月25日
    浏览(48)
  • uniapp利用scroll-view实现滚动触底加载

    可以使用以下这种方式来做滚动触底加载,但是官网提示长列表性能不太好,目前也没有更好的方式,暂时先这么处理。 微信小程序官方在scroll-view中也提供了一种触底加载的方式,也没有我写的这么复杂,在uniapp中要改写成vue的方式 @scrolltolower 才能生效,两个方式各有优劣

    2024年02月13日
    浏览(51)
  • 微信小程序scroll-view滑动的时候滑动到指定位置

    效果实现 1.滑动的时候调动滑动事件bindscroll=\\\"scroll\\\" scroll-with-animation 过渡动画 scroll-top=\\\"{{scrolltop}}\\\" 距离顶部多少高度 2.在调用scroll里面的事件函数 这里使用的是获取手机屏幕大小的宽度 res.screenWidth 来自适应头部悬浮的位置的显示与隐藏 opacity:( 1 - e.detail.scrollTop / 100 / 3).to

    2024年02月16日
    浏览(45)
  • 微信小程序 scroll-view设置scroll-x无法横向显示和滑动的解决方案

    仅仅设置 scroll-x无法实现横向排列和滑动?还需在scroll-view和子view的wxss样式里进行如下设置 如果想在子view里使用 弹性布局 display:flex ,也可以这样:

    2024年02月04日
    浏览(49)
  • 微信小程序——监听页面滑动(二)判断用户在做向上滑动还是向下滑动(onScrollPage scroll-view)

    知识专栏 专栏链接 微信小程序专栏 https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 Git版本管理 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 监听页面滑动 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 有关 微信小程序 的相关知识可以前

    2024年02月11日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包