UGUI ScrollRect实现带按钮翻页支持拖拽

 更新时间:2020年6月25日 10:34  点击:1707

本文实例为大家分享了UGUI ScrollRect带按钮翻页支持拖拽的具体代码,供大家参考,具体内容如下

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections.Generic;
using System;
/// <summary>
/// 略知CSharp 
/// </summary>
public class ScrollRectHelper : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
 
 public float smooting = 5;    //滑动速度
 public List<GameObject> listItem;   //scrollview item 
 public int pageCount = 3;    //每页显示的项目
 
 ScrollRect srect;
 float pageIndex;     //总页数
 bool isDrag = false;    //是否拖拽结束
 List<float> listPageValue = new List<float> { 0 }; //总页数索引比列 0-1
 float targetPos = 0;    //滑动的目标位置
 float nowindex = 0;     //当前位置索引
 
 void Awake()
 {
 srect = GetComponent<ScrollRect>();
 ListPageValueInit();
 }
 
 //每页比例
 void ListPageValueInit()
 {
 pageIndex = (listItem.Count / pageCount)-1;
 if (listItem != null && listItem.Count != 0)
 {
  for (float i = 1; i <= pageIndex; i++)
  {
  listPageValue.Add((i / pageIndex));
  }
 }
 }
 
 void Update()
 {
 if (!isDrag)
  srect.horizontalNormalizedPosition = Mathf.Lerp(srect.horizontalNormalizedPosition, targetPos, Time.deltaTime * smooting);
 }
 /// <summary>
 /// 拖动开始
 /// </summary>
 /// <param name="eventData"></param>
 public void OnBeginDrag(PointerEventData eventData)
 {
 isDrag = true;
 }
 /// <summary>
 /// 拖拽结束
 /// </summary>
 /// <param name="eventData"></param>
 public void OnEndDrag(PointerEventData eventData)
 {
 isDrag = false;
 var tempPos = srect.horizontalNormalizedPosition; //获取拖动的值
 var index = 0;
 float offset = Mathf.Abs(listPageValue[index] - tempPos); //拖动的绝对值
 for (int i = 1; i < listPageValue.Count; i++)
 {
  float temp = Mathf.Abs(tempPos - listPageValue[i]);
  if (temp < offset)
  {
  index = i;
  offset = temp;
  }
 }
 targetPos = listPageValue[index];
 nowindex = index;
 }
 
 public void BtnLeftGo()
 {
 nowindex = Mathf.Clamp(nowindex - 1, 0, pageIndex);
 targetPos = listPageValue[Convert.ToInt32(nowindex)];
 }
 
 public void BtnRightGo()
 {
 nowindex = Mathf.Clamp(nowindex + 1, 0, pageIndex);
 targetPos = listPageValue[Convert.ToInt32(nowindex)];
 
 }
}

DEMO 下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09
  • element表格行列拖拽的实现示例

    本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
  • C#控件Picturebox实现鼠标拖拽功能

    这篇文章主要为大家详细介绍了C#控件Picturebox实现鼠标拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • javascript轻量级库createjs使用Easel实现拖拽效果

    这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下...2016-02-21
  • 一百多行代码实现react拖拽hooks

    这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
  • Unity3D UGUI实现翻书特效

    这篇文章主要为大家详细介绍了Unity3D UGUI实现翻书特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • vue element el-transfer增加拖拽功能

    这篇文章主要介绍了vue element el-transfer增加拖拽功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-16
  • vue实现可拖拽的dialog弹框

    element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验,本文实现了vue可拖拽的dialog弹框,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-05-14
  • vue实现滑块拖拽校验功能的全过程

    vue验证滑块功能,在生活中很多地方都可以见到,使用起来非常方便,这篇文章主要给大家介绍了关于vue实现滑块拖拽校验功能的相关资料,需要的朋友可以参考下...2021-08-04
  • JavaScript实现简单拖拽效果

    这篇文章主要为大家详细介绍了JavaScript实现简单拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-15
  • js实现的简练高效拖拽功能示例

    这篇文章主要介绍了js实现的简练高效拖拽功能,通过对js鼠标事件的扩展实现拖拽效果,非常简单实用,需要的朋友可以参考下...2017-01-09
  • javascript拖拽效果延伸学习

    这篇文章主要介绍了javascript拖拽效果延伸的学习,关于拖拽延伸出来的一些效果,感兴趣的朋友可以参考一下...2016-04-06
  • C#利用控件拖拽技术制作拼图游戏

    这篇文章主要介绍了C#利用控件拖拽技术制作拼图游戏的方法以及核心代码,需要的朋友可以参考下...2020-06-25
  • JS实现鼠标按下拖拽效果

    这篇文章主要为大家详细介绍了JS实现鼠标按下拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-24
  • C# 文件拖拽和pixturBox缩放与拖拽功能

    这篇文章主要介绍了C# 文件拖拽和pixturBox缩放与拖拽功能,代码简单易懂,非常不错具有参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • Html5原生拖拽相关事件简介以及基础实现

    这篇文章主要介绍了Html5原生拖拽相关事件简介以及基础实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
  • vue实现页面div盒子拖拽排序功能

    本文主要介绍了vue实现页面div盒子拖拽排序功能,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-22
  • C#控件picturebox实现图像拖拽和缩放

    这篇文章主要为大家详细介绍了C#控件picturebox实现图像拖拽和缩放,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • 原生js配合cookie制作保存路径的拖拽

    这篇文章主要介绍了原生js配合cookie制作保存路径的拖拽效果,感兴趣的小伙伴们可以参考一下...2016-01-02
  • js实现拖拽效果(构造函数)

    这篇文章主要介绍了js利用构造函数实现拖拽效果...2015-12-16