Cocos Creator ScrollView 性能优化之 UISuperScrollView 开箱即用

分享一个 ScrollView 优化组件

增加一个 在线演示地址 显得高大上一点

目前支持的功能

  • 水平/垂直滑动

  • 可变尺寸动态更新

  • 平滑滚动到底部

  • Grid 正序排列、倒序排列

  • 无限循环滚动 单向、双向

  • 下拉刷新 (只是这么叫 实际上就是两种类型的消息 你也可以下拉做其他的事)

  • 上拉加载

三个核心脚本

  • 【 UISuperScrollView 】
  • 【 UISuperLayout 】
  • 【 UISuperItem 】

代码有大量注释 方便大哥们修修改改。

使用方法:

        let layout: UISuperLayout
        let array = [
            { name: "1" },
            { name: "2" },
            { name: "3" },
        ]
        layout.total(array.length)

        // 增加数据
        array.push({ name: "4" })
        layout.total(array.length)

        // 删除数据
        array.slice(1, 1)
        layout.total(array.length)

        // 更新数据
        array[1] = { key: "我是key", value: "换个结构" }
        layout.total(array.length)

        // 清空列表
        layout.total(0)

        // 滚动到顶部 
        layout.scrollToHeader(0.5)

        // 滚动到底部 
        layout.scrollToFooter()

核心方法实际上就一个 UISuperLayout 里的 total(长度) 方法 组件本身不管理任何数据,在这样做比较灵活
当你对你的数据做了【增加】【删除】【更新数据】【在指定位置插入数据】增删改查操作之后只需要调用一个total(数组长度) 方法就行了,是不是感觉特别简单?

当然还有很多功能没有做,目前能想到就这些了

下面是完整的测试工程, 有bug就提issues,好改的就改下,如果喜欢记得赏个 Star 谢谢各位大佬!

github https://github.com/icipiqkm/UISuperScrollView

111赞

感谢大佬,已经三连。
能不能请大佬再出一个下拉刷新 上拉加载和删除任意数据的功能呢 调皮~

1赞

嗯 刷新/加载我明白 删除任意数据是什么功能 现在也可以删除啊

功能加上去了 git已更新

好爽啊,被大佬重视的感觉在cocos论坛已经很久没有过了,感谢

1赞

mark加粗文字

可以删除中间任意指定数据吗?

可以 例子中有

1赞

给大佬递茶

实际上你增删改查任何数据都是操作你自己的数据数组,组件不关心你的数据 你只需要调用 this.layout.total(数组长度) 就行了

排列方向没有GRID模式

再重写一下 scrollTo 跳到指定的index位置。 完美 哈哈

已经更新上去了

1赞

有时间看看

给愿意分享的人点赞

:+1:大佬厉害

今天在研究windows系统下的列表触屏滑动 ~ 因为现在有很多windows平板电脑是触屏的比如surface pro 当平台识别为windows的时候是启用鼠标的滚轮滑动事件 触摸touchmove有人说是浏览器屏蔽了所以无法使用 我个人倒是感觉是creator底层屏蔽 不知道大神有没有思路 ~

mark~~~~

你是说有些浏览器 的touchmove不会触发吗?

是的 ~ windows系统下据说就是浏览器屏蔽了touchmove 因为有鼠标事件 ~ 但其实很多场景别人不用鼠标 比如学校演示的大屏幕 有很多都是直接触屏操作 这时候列表滚不了 很尴尬 ~ 一直没能有很好的解决方案 最终难道还要专门为这个平台搞个按钮滑动:sweat: 我自己用surface pro用浏览器(任何浏览器)操作过 确实没有touch move事件 有点击事件