Unity SnapScrollRect 滚动 匹配 列表 整页

展示效果


原理:

当停止滑动时

判断Contet的horizontalNormalizedPosition

与子Item的缓存值 相减,并得到最小值,然后将Content  horizontalNormalizedPosition滚动过去

使用方式:

直接将脚本挂到ScrollRect上

注意:在创建Content子物体时 或子物体数量变更,需要调用Refresh

代码:

namespace ShangShangQian.Component
{
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    using UnityEngine.EventSystems;
    using System.Linq;
    using UnityEngine.Events;

    [RequireComponent(typeof(ScrollRect))]
    public class SnapScrollRect : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
    {
        private RectTransform content;
        private ScrollRect rect;

        /// <summary>
        /// content 的位置应该滚到什么
        /// </summary>
        public float target = 1;

        /// <summary>
        /// 回滚的速度 0-1 越小越快
        /// </summary>
        public float smooting = 0.25f;
        public float currentVelocity;

        public float horizontalNormalizedPosition;

        public List<float> values = new List<float>();
        public List<float> distances = new List<float>();
        public List<RectTransform> items = new List<RectTransform>();

        /// <summary>
        /// 是否拖拽中
        /// </summary>
        public bool isDrag = false;

        /// <summary>
        /// 到最近item的距离
        /// </summary>
        public float distanceMin;

        /// <summary>
        /// 到最近item的索引
        /// </summary>
        public int selectIndex;

        /// <summary>
        /// 是否匹配滑动中
        /// </summary>
        public bool Snaping = false;

        /// <summary>
        /// 回滚完毕后调用
        /// </summary>
        public UnityEvent<int> OnSnap;

        void Start()
        {
            rect = GetComponent<ScrollRect>();
            content = rect.content;
        }

        /// <summary>
        /// 刷新数据,content的子物体数量变更时需要调用此函数
        /// </summary>
        public void Refresh()
        {
            items.Clear();
            values.Clear();
            for (int i = 0; i < content.childCount; i++)
            {
                if (content.GetChild(i).gameObject.activeInHierarchy)
                {
                    items.Add(content.GetChild(i).GetComponent<RectTransform>());
                }
            }

            //累加的变量
            values.Add(0);
            //每一个格子的所占比多少  
            float v = 1f / (items.Count - 1);
            for (int i = 1; i < items.Count; i++)
            {
                values.Add(i * v);
            }

            //不同子元素数量 item 对应 的content  horizontalNormalizedPosition 数值
            //1  0  
            //2  0 1   
            //3  0 0.5 1
            //4  0 0.33 0.66 1
        }

        void Update()
        {
#if UNITY_EDITOR
            if (Input.GetKeyDown(KeyCode.A))
            {
                Refresh();
            }
#endif
        }

        void FixedUpdate()
        {
            horizontalNormalizedPosition = rect.horizontalNormalizedPosition;

            if (isDrag)
            {
                return;
            }

            if (Snaping)
            {
                rect.horizontalNormalizedPosition = Mathf.SmoothDamp(rect.horizontalNormalizedPosition, target, ref currentVelocity, smooting);
                if (Mathf.Abs(rect.horizontalNormalizedPosition - values[selectIndex]) < 0.001f)
                {
                    Snaping = false;
                    Debug.Log("回滚:" + selectIndex);
                    OnSnap.Invoke(selectIndex);
                }
            }

        }

        public void OnBeginDrag(PointerEventData eventData)
        {
            isDrag = true;
        }

        public void OnDrag(PointerEventData eventData)
        {
            isDrag = true;
        }

        public void OnEndDrag(PointerEventData eventData)
        {
            isDrag = false;

            Snaping = true;

            distances.Clear();

            //当松手后判断那个距离最近
            for (int i = 0; i < values.Count; i++)
            {
                distances.Add(Mathf.Abs(rect.horizontalNormalizedPosition - values[i]));
            }

            distanceMin = distances.Min();

            selectIndex = distances.FindIndex(b => b == distanceMin);
            target = values[selectIndex];
            rect.StopMovement();
        }


        /// <summary>
        /// 滚到到指定位置
        /// </summary>
        /// <param name="index"></param>
        public void SnapToIndex(int index)
        {
            Snaping = true;
            selectIndex = index;
            target = values[selectIndex];
        }
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/336408.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python初学者须知(10)初识条件判断

本系列博客主要针对的是Python初学者。Python语言简洁、强大的特性吸引了越来越多的技术人员将他们的项目转移到Python上。目前&#xff0c;Python已经成为计算机行业最流行的编程语言之一。笔者考虑到Python初学者的多元化&#xff08;Python学习者可能是对编程感兴趣的中学生…

[小程序]API、数据与事件

一、API ①事件监听API 以on开头&#xff0c;用来监听事件的触发&#xff08;如wx.inWindowResize&#xff09; ②同步API 以Sync结尾&#xff0c;且可以通过函数返回值获取&#xff0c;执行错误会抛出异常&#xff08;如wx.setStorageSync&#xff09; ③异步API 类似网页中的…

记录一个sql:查询商品码对应多个商品的商品码

目录 背景sql 语句总结 背景 一个项目中&#xff0c;商品表和商品码表是一对多的关系&#xff0c;但由于程序没有控制好&#xff0c;导致有些商品码对应有多个商品&#xff0c;为了修正数据&#xff0c;我们得把商品码对应多个商品的商品码找出来. sql 语句 goods_detail表结构…

【Spring 篇】MyBatis中的CRUD魔法:数据之美的四重奏

MyBatis&#xff0c;这个数据持久化的魔法师&#xff0c;以其优雅的SQL映射和简洁的配置文件&#xff0c;为我们呈现出一场CRUD&#xff08;Create, Read, Update, Delete&#xff09;的奇妙之旅。在这篇博客中&#xff0c;我们将深入探讨MyBatis中的增、删、改、查操作&#x…

回归预测 | Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据多输入单输出回归预测

回归预测 | Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据多输入单输出回归预测 目录 回归预测 | Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据多输入单输出回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据…

Spring Security 优化鉴权注解:自定义鉴权注解的崭新征程

文章目录 1. 引言2. Spring Security基础2.1 Spring Security概述2.2 PreAuthorize注解 3. 自定义鉴权注解的优势3.1 业务语义更明确3.2 参数化鉴权更灵活3.3 可维护性更好 4. 实现自定义鉴权注解4.1 创建自定义注解4.2 实现鉴权逻辑4.3 注册自定义注解和逻辑4.4 使用自定义注解…

Vagrant创建Oracle RAC环境示例

利用Vagrant安装Oracle RAC&#xff08;默认为non-CDB模式&#xff09;&#xff0c;生成2台虚机&#xff0c;耗时约1小时。 node1: -----------------------------------------------------------------node1: INFO: 2024-01-11 18:25:54: Make create database commandnode1: …

有关Quick BI中lod_fixed函数中以MAX()作为过滤条件报错

一、Quick BI中的lod_fixed函数 lod_fixed{维度1[,维度2]...:聚合表达式[:过滤条件]} 作用&#xff1a;使用指定维度进行计算而不引用任何其他维度。其中&#xff0c; 维度1[,维度2]...&#xff1a;声明维度&#xff0c;指定聚合表达式要连接到的一个或多个维度。使用逗号分…

【HarmonyOS】掌握布局组件,提升应用体验

从今天开始&#xff0c;博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”&#xff0c;对于刚接触这项技术的小伙伴在学习鸿蒙开发之前&#xff0c;有必要先了解一下鸿蒙&#xff0c;从你的角度来讲&#xff0c;你认为什么是鸿蒙呢&#xff1f;它出现的意义又是…

DP活动:以太网HMI线下培训RA6M3 HMI Board[MQTT Squareline LVGL]

以太网HMI线下培训-环境准备 这是官方社群的文档&#xff1a;【腾讯文档】以太网线下培训&#xff08;HMI-Board&#xff09;所有教程都在这~ https://docs.qq.com/doc/DY0FIWFVuTEpORlNn R A 6 M 3 H M I − B o a r d \textcolor{#4183c4}{RA6M3 HMI-Board} RA6M3HMI−Board…

鼠标移动高亮边框

这个其实我也没有很明白&#xff0c;写的比较粗糙。 说一下步骤&#xff1a; 1.在界面上放上几排的div&#xff0c;要求做成卡片网格布局。 2.每一个卡片年内放置一个div&#xff0c;写文字或者其他都可以&#xff0c;要求不设置高度使用position: absolute; inset: 1px;将元素…

lattice Diamond Programmer程序下载

Lattice Diamond Programmer Diamond Programmer程序下载1 Diamond Programmer启动2 Diamond Programmer程序烧写3 Cannot Identify Device错误解决 Diamond Programmer程序下载 Diamond Programmer适用于Lattice公司的FPGA器件与CPLD器件的程序下载&#xff0c;其下载步骤如下…

【flutter】完全自定义样式模态对话框

示例完成结果展示&#xff1a; 示例组件代码&#xff1a; context&#xff1a;上下文 title&#xff1a;提示标题&#xff0c;null时不显示 content&#xff1a;提示内容&#xff0c;null时不显示 cancelText&#xff1a;取消按钮文字&#xff0c;null时不显示取消按钮 confirm…

每日一练【最大连续1的个数】

一、题目描述 给定一个二进制数组 nums 和一个整数 k&#xff0c;如果可以翻转最多 k 个 0 &#xff0c;则返回 数组中连续 1 的最大个数 。 二、题目解析 本题同样是利用滑动窗口的解法。 首先进入窗口&#xff0c;如果是1&#xff0c;就直接让right&#xff0c;但是如果是…

Android双击图片放大移动图中双击点到ImageView区域中心,Kotlin

Android双击图片放大移动图中双击点到ImageView区域中心&#xff0c;Kotlin 初始化状态&#xff0c;ImageView里面只是显示一张fitcenter被缩放的原图&#xff0c;当手指在图片上双击后&#xff08;记录双击点位置&#xff1a;mCurX&#xff0c;mCurY&#xff09;画一个红色小圆…

html5实现好看的年会邀请函源码模板

文章目录 1.设计来源1.1 邀请函主界面1.2 诚挚邀请界面1.3 关于我们界面1.4 董事长致词界面1.5 公司合作方界面1.6 活动流程界面1.7 加盟支持界面1.8 加盟流程界面1.9 加盟申请界面1.10 活动信息界面 2.效果和源码2.1 动态效果2.2 源码目录结构 源码下载 作者&#xff1a;xcLei…

SpringMVC 文件上传和下载

文章目录 1、文件下载2、文件上传3. 应用 Spring MVC 提供了简单而强大的文件上传和下载功能。 下面是对两者的简要介绍&#xff1a; 文件上传&#xff1a; 在Spring MVC中进行文件上传的步骤如下&#xff1a; 在表单中设置 enctype“multipart/form-data”&#xff0c;这样…

logstack 日志技术栈-04-opensource 开源工具 Syslog-ng+Highlight.io

5. Syslog-ng Syslog-ng 是一个开源的日志管理解决方案&#xff0c;主要用于收集和处理日志数据。它可以从多种源收集日志&#xff0c;包括系统日志、网络设备日志和第三方应用日志。 然后将日志解析、分类、重写和关联到统一格式中&#xff0c;然后将其存储或安全地传输到不同…

Element-UI 多个el-upload组件自定义上传,不用上传url,并且携带自定义传参(文件序号)

1. 需求&#xff1a; 有多个&#xff08;不确定具体数量&#xff09;的upload组件&#xff0c;每个都需要单独上传获取文件&#xff08;JS File类型&#xff09;&#xff0c;不需要action上传到指定url&#xff0c;自定义上传动作和http操作。而且因为不确定组件数量&#xff0…

vscode配置web开发环境(WampServer)

这里直接去下载了集成的服务器组件wampserver&#xff0c;集成了php&#xff0c;MySQL&#xff0c;Apache 可能会出现安装问题&#xff0c;这里说只有图上这些VC包都安装了才能继续安装&#xff0c;进入报错里提供的链接 在页面内搜索相关信息 github上不去可以去镜像站 下载…