【源码工具】分享一个UI左右无限翻页组件

谢谢分享;
下面是我修改的 3.3.0 版本:

UIScrollSelect.ts.zip (2.1 KB)
效果如下
2021-08-30 18-47-29.2021-08-30 18_47_46

2021-08-31 更新 新版本 -----------------------------

下面 有网友提出 不想 循环 这里就做个 可以选择 不循环的

需要 取消勾选 取消循环

image

1000

UIScrollSelects设置是否循环加强版本.ts.zip (2.6 KB)

这个 设置循环 选项的 版本 包含了 上面的 功能,测试时间有限 大家后续发现问题 再交流吧!
Cocos Creator 3.x 版本

3赞

大佬,你这个版本会复现点击item1,然后循环所有item,移动一圈,然后又到item1不.

楼主的逻辑没有更改,只做了语法的兼容和升级而已,试了一下 你说的这个 功能正常

噢噢,好的,因为两个版本我都试了,都会出现这个问题 :rofl:

这个不是问题 是功能的一部分啊 无限翻页 你看看 标题 如果你想修改 可以修改源码 这里:

  /** 向左滚一个点 */
scrollToLeft(){
   // TODO 这里添加判断 如果到最左边了 就 设置 return 或者啥的
    this._toMoveX = 1
    this.scrollTo((this.currentIndex-1+this.childs.length)%this.childs.length)
}

/** 向左滚一个点 */
scrollToRight(){
  // TODO 这里添加判断 如果到最右边了 就 设置 return 或者啥的
    this._toMoveX = -1
    this.scrollTo((this.currentIndex+1+this.childs.length)%this.childs.length)
}

当然 更好的操作 说 添加一个 属性 可以 选择 是否 循环列表

 @property({
    type: CCBoolean,
    tooltip: "是否无限翻页"
})
isCircles: boolean =true;

继续完善这个组件 即可 !

是这样的,假设我有12个item,默认是item0,我点击item1,应该会滑动到item1,会出现一种情况,循环12个item,再到item1,我试着改了代码,处理当前的currentIndex,也行不通 :rofl:

那我一会儿 添加一下吧 !估计下午 上传!

给大佬递茶 :love_you_gesture:

组件写好
image
image
1000

最后文件 上传到 上面我的文件下载的楼层 自己去下载吧!

1赞

大佬威武.

战略性mark

大佬,你这个滑动到两边的时候有bug,我滑动到两边的时候,直接log输出我到两边了

不太理解所讲的bug ,你不想要log输出是吗? 这行代码 注释掉可以吗?log输出 本来就是给调试用的呢!

我看代码所得出的结论是_isMoveEdge()这个函数在我不断移动的时候,左右两端的节点的坐标超出范围了,所以导致我触摸结束在_onTouchEnd()函数判断是否到达左右边缘的时候,就return了。

上面 我分享了两个 3.0 版本的 第一个是 按照原题主 写的 就兼容了语法 没有添加新的功能

第二个是 按照 下面网友提出的需求 写了 一个兼容 可以 不循环翻页的

你看看 上面 如果 你需要不断循环。下载第一个即可!

我想要实现这个不循环的

mark一个

解决了,直接在_onTouchEnd()中,当滑动到两端的时候,直接暴力设置为两端节点index即可

嗯 解决了就好 :joy:

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。