Cocos creator scrollbar支持拖动滑块来滚动scrollview吗

我使用的版本是Cocos Creator 1.2.0

scrollview可以直接用手指滑动,此时scrollbar的位置也相应会更新;
但怎么样用手指拖动scrollbar的滑块来滚动scrollview?

目前还没有内置这个功能,不过可以自己实现:

  • 在scrollbar节点上注册触摸事件,监听touchmove消息
  • 在消息回调里判断触摸移动的距离,得到和scrollbar总的活动范围比值
  • 调用 scrollTo 接口
1赞

我是新手
我也有一样的问题
不太明白怎么处理
可以指点一下吗

cccscrollbar.zip (11.1 KB)
cocos creator v3.0版本~用slider组件实现的

问一下大佬, 为啥你写的这个我导入之后, 提示
this.scrollView.scrollToOffset(new Vec3(0, maxScrollOffset.y * slider.progress, 0), 0.1);
这里 类型“Vec3”的参数不能赋给类型“Vec2”的参数。
是什么配置不一致导致的吗?
我用的3.2版本.

https://github.com/dengxiaochun/CocosCreatorExtra
我原先做过这样的拓展,可以参照

参考大神们的例子,结合了上面两位大佬的作品整合了一个新的出来

Cocos Creator ScrollBar(滑动按钮)增强组件

版本 2.4.7 可用 另外 复用滑动对象 使用 这个链接的组件也是可以兼容的。

虚拟列表(ScrollView) ,需要显示大量Item时能大幅降低Drawcall

效果如下:

纵向列表:

2022-01-11 12-46-45.2022-01-11 12_47_51

横向列表

2022-01-11 12-48-10.2022-01-11 12_48_29

源码:

const {ccclass, property, requireComponent, menu} = cc._decorator;

@ccclass
@requireComponent(cc.Slider)
@menu(“组件库/ScrollBarEnhance”)
export class ScrollBarEnhance extends cc.Component {
@property({
tooltip: “对应的(ScrollView)滑动列表”,
type: cc.ScrollView
})
private scrollView: cc.ScrollView = null!;
//滑动事件改变事件
@property({
type: [cc.Component.EventHandler],
tooltip: CC_DEV && “滑动事件改变事件”,
})
private renderEvent: cc.Component.EventHandler[] = [];

private vSlider: cc.Slider = null!;

private static creatEventHandler(target: cc.Node, component: string, handler: string) {
    const e = new cc.Component.EventHandler();
    e.target = target;
    e.component = component;
    e.handler = handler;
    return e;
}

/**
 * 外部修改进度
 * @param p
 */
public refresh(p: number) {
    let progress, slider = this.vSlider || this.node.getComponent(cc.Slider);
    progress = Math.min(p, 1);
    progress = Math.max(p, 0);
    slider.progress = progress;
    this.onSliderEvent(slider, "");
    console.log("slider.progress----:" + JSON.stringify(slider.progress));
}

protected start() {
    this.addScrollChildIndex();
}

/** 增加scroll子节点区间功能 */
private addScrollChildIndex() {
    /** 禁用鼠标滚轮,滚轮在移动区间时ScrollEvent返回很怪异,没有SCROLL_ENDED事件回调 */
        // this.node.off(cc.Node.EventType.MOUSE_WHEEL);
    const scroll = this.scrollView;
    this.vSlider = this.node.getComponent(cc.Slider);
    let className = cc.js.getClassName(this);
    /** Slider 事件监听 */
    this.vSlider.slideEvents.push(ScrollBarEnhance.creatEventHandler(this.node, className, 'onSliderEvent'));
    /** ScrollView 事件监听 */
    scroll.scrollEvents.push(ScrollBarEnhance.creatEventHandler(this.node, className, 'onScrollEvent'));
    /** 初始化进度 */
    this.scrollMoveEvent();
}

/**
 * 滚动列表事件回调
 * @param scroll
 * @param eventType
 * @param customEventData
 * @private
 */
private onScrollEvent(scroll: cc.ScrollView, eventType: cc.ScrollView.EventType, customEventData: string) {
    switch (eventType) {
        case cc.ScrollView.EventType.SCROLL_BEGAN:
            break;
        case cc.ScrollView.EventType.SCROLL_ENDED:
            break;
        case cc.ScrollView.EventType.SCROLLING:
            this.scrollMoveEvent();
            break;
    }
}

//滑动列表--滚动条改变
private scrollMoveEvent() {
    let vertical = this.scrollView.vertical, maxScrollOffset, getScrollOffset;
    if (vertical) {
        maxScrollOffset = this.scrollView.getMaxScrollOffset().y;
        getScrollOffset = this.scrollView.getScrollOffset().y;
    } else {
        maxScrollOffset = this.scrollView.getMaxScrollOffset().x;
        getScrollOffset = this.scrollView.getScrollOffset().x * (-1);
    }
    // console.log("maxScrollOffset", maxScrollOffset);
    // console.log("getScrollOffset", getScrollOffset);
    if (getScrollOffset / maxScrollOffset > 0 && getScrollOffset / maxScrollOffset < 1) {
        this.vSlider.progress = getScrollOffset / maxScrollOffset;
    } else if (getScrollOffset / maxScrollOffset <= 0) {
        this.vSlider.progress = 0;
    } else {
        this.vSlider.progress = 1;
    }
    // console.log(this.vSlider.progress);
    console.log("scrollMoveEvent", this.vSlider.progress);
    if (this.renderEvent && this.renderEvent.length) {
        cc.Component.EventHandler.emitEvents(this.renderEvent, this.vSlider.progress);
    }
}

/**
 * 滑动按钮 回调
 * @param slider
 * @param customEventData
 * @private
 */
private onSliderEvent(slider, customEventData: string) {
    // console.log("onSliderEvent", slider.progress);
    let vertical = this.scrollView.vertical, maxScrollOffsetX = 0, maxScrollOffsetY = 0;
    if (vertical) {
        maxScrollOffsetX = this.scrollView.getScrollOffset().x;
        maxScrollOffsetY = this.scrollView.getMaxScrollOffset().y * slider.progress;
    } else {
        maxScrollOffsetX = this.scrollView.getMaxScrollOffset().x * slider.progress;
        maxScrollOffsetY = this.scrollView.getScrollOffset().y;
    }
    this.scrollView.scrollToOffset(cc.v2(maxScrollOffsetX, maxScrollOffsetY), 0.05);
}

}

1赞

上面链接地址挂了挂个新的
Cocos Creator ScrollBar(滑动按钮)增强组件

1赞