UGUI ScrollRect使用(实现滑动效果)

在工作中需要实现滑动效果,网上一番资料查询之后了解到ScrollRect组件,记录一下使用过程中遇到的问题与解决办法。
先来看一下ScrollRect的属性
在这里插入图片描述
其中Content和Viewport非常重要,能否实现滑动效果取决于这两个属性,至于其他的属性是例如惯性,上下还是左右滑动,随便点点就能知道是干啥的,此处不做过多的解释。
先来介绍Viewprot,表示你想展示的窗口的大小,可以理解为手机或者电脑的屏幕,用来给用户查看的屏幕的大小范围
Content属性:需要显示的数据,即展示给客户看的内容。我遇到的大部分问题也都是在Content上。
所以我们的组件结构如下:
在这里插入图片描述
首先,我们数据一般是动态加载的,没有办法确定Content大小,假设现在需要加载图片,一个客户有10张,一个客户只有5张,此时该怎么办呢 ?答案很简单,只需要给Content添加以下两个组件。
在这里插入图片描述
Vertical Layout Group是子类组件大小排版,ContentSizeFitter是根据子类组件大小确定自身的大小。
假设我们现在要加载20个数据。
在这里插入图片描述
数据可以正常加载,也可以滑动,但是初始位置不对,那是因为ContentSizeFitter会自动根据当前在这里插入图片描述
pivot点确定中心点,只需要将Y改为1,设置为顶面即可。(Pivot点是从左到右,从下到上,如果想设置横向滑动,将X改为0即可)
在这里插入图片描述
正常显示。
案例Demo

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值