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

本文实例为大家分享了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 下载地址

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

(0)

相关推荐

  • Unity UGUI实现滑动翻页直接跳转页数

    本文实例为大家分享了Unity UGUI实现滑动翻页,直接跳转页数的具体代码,供大家参考,具体内容如下 首先看一下最终效果 其实这个功能基本上是老生常谈了,所以代码还是很简单 using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using System; public class Pa

  • UGUI实现图片拖拽功能

    这一篇博客我们来使用UGUI实现图片的拖拽功能. 说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标.),这两个坐标是不一样的,所以拖拽是就需要转换.因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标.转换的方法: RectTransformUtility.ScreenPointToLocalPointInRectangle ( - );这个方法可以把屏幕坐标转换成 ugui 坐标.至于屏幕

  • Unity UGUI实现滑动翻页效果

    本文实例为大家分享了Unity UGUI实现滑动翻页效果的具体代码,供大家参考,具体内容如下 这个问题真的是老生常谈的事情了,不过在这里还是要说一下,以便以后之需 首先看一下效果图 最后在Content下面是一些Image using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using

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

    本文实例为大家分享了UGUI ScrollRect带按钮翻页支持拖拽的具体代码,供大家参考,具体内容如下 using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.EventSystems; using System.Collections.Generic; using System; /// <summary> /// 略知CSharp /// </summary> p

  • js带前后翻页的图片切换效果代码分享

    本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu

  • jQuery插件实现文件上传功能(支持拖拽)

    先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象.  var fr = new FileReader() 1.这个对象拥有五个方法: 下面附上一个例子:

  • Android新特性页面之ViewPager拖拽到最后一页再拖拽打开其他Activity(三种方法)

    android新特性页面,ViewPager拖拽到最后一页再拖拽打开其他Activity.实现的方式有很多,效果比较好的就是到了最后一页再拖拽出现禁止蓝色条时再跳转activity 方式一:拿到ViewPager的边界条EdgeEffectCompat,判断是否到了边界(获取EdgeEffectCompat通过反射,方法来自网络最后边会给出原文) /** * 初始化view */ private void initView(){ pager = (ViewPager) findViewById(

  • unity scrollRect实现按页码翻页效果

    本文实例为大家分享了unity实现按页码翻页效果的具体代码,供大家参考,具体内容如下 用来做背包 商店的按页翻页功能,先上效果图 其中,dragNum 表示的是 如果为3,便是滑动距离超过当前页面宽度的百分之三十位成功 connect表示 scrollRect下connet的大小 然后是函数的初始化方法 这里提供了两个方法  一个是直接提供页数 参数分别代表 总页数,要显示的页数 以及切换到要显示的页数是否播放滑动动画 以及当时用来做背包.商店的方法2 和上面不用的是传入的是物品的数量以及每页显

  • C# 实现的图片盖章功能,支持拖拽、旋转、放缩、保存

    实现图片盖章功能,在图片上点击,增加"图章"小图片,可以拖拽"图章"到任意位置,也可以点击图章右下角园框,令图片跟着鼠标旋转和放缩. 操作方法:1.点击增加"图章"2.选中移动图标3.点中右下角放缩旋转图章. 效果图: 实现代码如下: 1.  窗口Xaml代码 复制代码 代码如下: <Window x:Class="Lenovo.YogaPaster.ImageEditWindow"    xmlns="htt

  • 小程序瀑布流组件实现翻页与图片懒加载

    电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框架抽象成组件,瀑布流的内容由业务确定.这样即可实现组件化和自定义的最大平衡,微信小程序组件源码. 首先,我们来看一下瀑布流组件在实际项目中的实际效果. 1 实际效果 瀑布流组件实际效果如下图所示,左侧为用户交互效果,右侧为图片懒加载实际效果. 2 什么是瀑布流? 瀑布流,又称瀑布流式布局.是比较流行

  • WPF使用Dragablz构建可拖拽分离的Tab页程序

    今天发现了一个可以快速实现类似于Chrome方式的可拖拽分离的Tab页程序Dragablz.它可以实现动态创建,删除Tab页,并支持拖拽后形成独立窗口和窗口合并. 使用起来还是非常方便的. <dragablz:TabablzControl Margin="8"> <dragablz:TabablzControl.InterTabController> <dragablz:InterTabController /> </dragablz:Taba

  • vue悬浮可拖拽悬浮按钮的实例代码

    前言 vue开发手机端悬浮按钮实现,可以拖拽,滚动的时候收到里边,不影响视线 github地址 使用,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件,让商城简单高效开发 线上体验 使用 将 src/components文件夹下的s-icons组件放到你的组件目录下 使用组件 // template <template> <div> <

随机推荐