目录
前言
- 前言
- 效果
- 实现
- 搭建UI
- 定义滚动方向
- 初始化数值
- 自动滚动
- 工程源码
- 注意
- 横向
- 竖向
如题的功能在项目中经常用到,滚动的信息内容,我们用scrollbar的value来控制滚动是可以实现的,不过当value为1时,我们从0继续循环会造成有闪烁的情况而且比较突兀,经过一段时间的研究终于实现了该功能。
效果分别方向的移动
自动滚动的思路就是不断的增加某一个方向的偏移值就可以实现,循环滚动时,将最早移出的节点移至滚动队列的最尾端即可,同时计算新的偏移值并同步,让列表看不出抖动,即可实现一直循环滚动,在此过程中将禁用ScrollRect组件,因为ScrollRect组件在节点顺序变化时会造成显示抖动,同时还需根据排序的组件(HorizontalOrVerticalLayoutGroup/GridLayoutGroup)进行间隔的计算。当鼠标悬停时启用ScrollRect组件并暂停滚动,鼠标离开时启用自动滚动并禁用ScrollRect。
搭建UI如图的搭建一个列表
public enum ScrollDir
{
BottomToTop = 1,
TopToBottom = 2,
LeftToRight = 3,
RightToLeft = 4
}
定义如上四个方向方便选择设置和分开处理。
初始化数值 scrollrect = gameObject.GetComponent();
scrolltran = scrollrect.GetComponent();
LayoutGroup = scrollrect.content.GetComponent();
GridGroup = scrollrect.content.GetComponent();
et = gameObject.GetComponent();
if (et == null)
et = gameObject.AddComponent();
//设置滚动间隔
if (LayoutGroup != null)
Space = LayoutGroup.spacing;
else if (GridGroup != null)
{
switch (AutoScrollDir)
{
case ScrollDir.BottomToTop://由底至顶滚动 向上
case ScrollDir.TopToBottom://由顶至底滚动 向下
Space = GridGroup.spacing.y;
break;
case ScrollDir.LeftToRight://由左至右滚动 →
case ScrollDir.RightToLeft://由右至左滚动 ←
Space = GridGroup.spacing.x;
break;
default:
Space = 0;
break;
}
}
//设置子节点高度和宽度
if (LayoutGroup != null && scrollrect.content.childCount > 0)
{
ItemWidth = scrollrect.content.GetChild(0).GetComponent().sizeDelta.x;
ItemHeight = scrollrect.content.GetChild(0).GetComponent().sizeDelta.y;
}
else if (GridGroup != null)
{
ItemWidth = GridGroup.cellSize.x;
ItemHeight = GridGroup.cellSize.y;
}
AddETEvent(et, EventTriggerType.PointerEnter, OnPointerIn);
AddETEvent(et, EventTriggerType.PointerExit, OnPointerOut);
如上代码初始化时候,主要寻找相关组件,排序组件和滚动组件等,同时根据不同组件获取间隔数值,还有排序对象的高宽度,以及事件绑定。这里通过添加EventTrigger组件,并绑定PointerEnter 和 PointerExit来实现鼠标悬停和退出功能。
界面的配置如图:
//开始自动滑动
void DoAutoScroll()
{
switch (AutoScrollDir)
{
//由底至顶滚动 向上
case ScrollDir.BottomToTop:
{
if (scrollrect.content.sizeDelta.y > scrolltran.sizeDelta.y + (ItemHeight + Space))
{
scrollrect.content.anchoredPosition3D += new Vector3(0, step, 0);
if (scrollrect.content.anchoredPosition3D.y >= (scrollrect.content.sizeDelta.y - scrolltran.sizeDelta.y) / 2)
{
if (GridGroup != null && GridGroup.constraintCount > 1)
{
for (int i = 0; i scrolltran.sizeDelta.y + (ItemHeight + Space))
{
scrollrect.content.anchoredPosition3D -= new Vector3(0, step, 0);
if (scrollrect.content.anchoredPosition3D.y 1)
{
for (int i = 0; i scrolltran.sizeDelta.x + (ItemWidth + Space))
{
scrollrect.content.anchoredPosition3D += new Vector3(step, 0, 0);
if (scrollrect.content.anchoredPosition3D.x >= -(scrollrect.content.sizeDelta.x - scrolltran.sizeDelta.x) / 2)
{
if (GridGroup != null && GridGroup.constraintCount > 1)
{
for (int i = 0; i scrolltran.sizeDelta.x + (ItemWidth + Space))
{
scrollrect.content.anchoredPosition3D -= new Vector3(step, 0, 0);
if (scrollrect.content.anchoredPosition3D.x 1)
{
for (int i = 0; i
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?