CocosCreator列表scrollview滑动速度的修改,鼠标滚动速度修改

原创已于 2024-06-19 15:01:55 修改 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #js #cocos-creator

于 2021-09-29 16:12:35 首次发布

游戏同时被 2 个专栏收录

38 篇文章

订阅专栏

开发语言

35 篇文章

订阅专栏

针对Cocos Creator在PC端鼠标滚动速度过慢的问题，本文介绍了如何修改CCScrollView.js源码，通过创建新的UIScrollview.js脚本并添加自定义组件，实现滑动速度的调整，以便在项目中更流畅地控制列表滚动。

由于cocos creator 在pc端使用scrollview 鼠标滚动速度太慢

原文地址 CocosCreator列表滑动速度的修改 - 简书 CocosCreator列表滑动速度的修改 - 简书引擎版本：2.2.2，之后升级的2.4.0直接可以修改组件的Brake，貌似就可以了。目前引擎内置的CCScrollView.js没有属性或者方法直接设置列表的滑动速度。 ...https://www.jianshu.com/p/cb7ec469f810

这里 cocos creator 2.4.4

目前引擎内置的CCScrollView.js没有属性或者方法直接设置列表的滑动速度。

CCScrollView.js路径：引擎安装路径/resources/engine/cocos2d/core/components；

打开引擎该脚本之后，里面有个_handleMoveLogic方法是控制列表滑动速度的；

// 拖动和鼠标滚动都执行的 
_processDeltaMove (deltaMove) {
        this._scrollChildren(deltaMove);
        this._gatherTouchMove(deltaMove);
    },

// 拖动
    _handleMoveLogic (touch) {
        let deltaMove = this._getLocalAxisAlignDelta(touch);
        this._processDeltaMove(deltaMove);
    },

所以我们在此基础上修改引擎代码如下：
1、新建脚本：
UIScrollview.js(可以随意起名字)
2、脚本代码如下：

/**
 * 列表的滑动速度修改脚本
 */
 cc.Class({
    //继承列表组件的脚本
    extends: cc.ScrollView,

    properties: {
        //自定义速率
        scrollSpeed: {
            default: 0.2,
            type: cc.Float
        },
    },

    _handleMoveLogic (touch) {
        let that = this;
        let deltaMove = touch.getDelta();
        //给默认的移动速度×自定义速率
        that._processDeltaMove(deltaMove.div(this.scrollSpeed));// 拖动不用加速，这里先除以
    },
    // 拖动和鼠标滚动 都走这里
    _processDeltaMove (deltaMove) {
        //给默认的移动速度×自定义速率
        let that = this;
        that._scrollChildren(deltaMove.mul(this.scrollSpeed));
        that._gatherTouchMove(deltaMove.mul(this.scrollSpeed));
    },

});

3、将项目里的需要修改滑动速度的节点的Scrollview组件删除，手动添加自定义组件UIScrollview；

打开自定义组件之后可发现，组件多了一个属性可以修改，该属性就是自定义速率，手动修改即可；