cocos creator使用scrollView实现循环滚动效果

晋骏喆
2023-12-01
当前仅适用于自低向上滚动,自上向下也简单,判断items[items.length-1]的位置即可eachToY=-1 ,同时,自左向右等也一样,将相对应的Y改成x就可以了。暂时没这需求,不写这么多了
关键性代码,如下,在组件onload时记录下scrollView绑定的content的y值放在this.lastContentPosY中
update: function (dt) {
        this.updateTimer += dt;
        this.scrollView.content.y = this.lastContentPosY;
        if (this.updateTimer < this.updateInterval) {
            return; // we don't need to do the math every frame
        }
        this.updateTimer = 0;
        if (this._data_.length <= this._showCount) {//当数据内容小于展示区的内容时,就不滚动了吗?????
            return;
        }
        let eachToY = 1;//y移动速度
        let items = this.scrollView.content.children;
        let deltY = items[0].y;
        if (Math.floor(items[0].y) >= (this._itemHeight + this.spacing)) {//已经向上走了一个元素位置,需要更新这个元素的位置了
            let ele = items.shift();
            ele.y = -(this._needBuildItemNum - 1) * (this._itemHeight + this.spacing);
            items.push(ele);//放到最下面了
            
            this.froInd++;

            let comp = ele.getComponent(this.itemComponentName);
            comp && comp.updateItem && comp.updateItem(this._data_[((this.froInd + this._needBuildItemNum - 1) % this._data_.length)], ele.ind);
            //更新索引坐标
            if (this.froInd >= this._data_.length) {//froind = 50 ,此时0已经显示了,下一次显示arr[1],故更新索引为0
                this.froInd = 0;
            }

            if (((this.froInd + this._needBuildItemNum - 1) % this._data_.length) == (this._data_.length - 1) || this._forceUpdate) {//49+1=50  此时需要判断缓存数组中是否需要更新数据到展示数组中
                cc.log("ddzd:我到结束区了" + (this.froInd + this._needBuildItemNum - 1));
                if (!this._isaddDataToBuff)
                    this._dataDel();//重新排列位置
            }
        }

        if (!this._dataDel_now) {//没有正在装填数据的时候,则进行滚动,否则停下来,我们装完数据再继续
            for (let i = 0; i < items.length; ++i) {//更新每个元素的位置
                items[i].y += eachToY;
            }
        }


    },
原理就是在间隔时间后对每一个items的元素位置x/y+1,并在首/尾items越过一个items身位将其移动到尾/首.
if (!this._data_ || !this._items || !this._itemPools) {
            this._delayTaskInfo = null;
            return;
        }
        //从_data_中选取一个需要显示的个数的数据用来显示
        let itemsdatas = this.getShowCountCYC();

        this.scrollView.stopAutoScroll();

        // recyle
        let children = this.scrollView.content.children.slice();
        this.scrollView.content.removeAllChildren(false);
        children.forEach(this._recyleItem.bind(this));

        let i = 0;
        itemsdatas.forEach(data => {
            let item = this._getItem();
            item.x = 0;
            item.y = -i * (this._itemHeight + this.spacing);
            item.ind = i;
            if (item) {
                if (this.itemComponentName) {
                    let comp = item.getComponent(this.itemComponentName);
                    comp && comp.updateItem && comp.updateItem(data, i);
                    // this._recyleItem(item);
                };

                this.scrollView.content.addChild(item);//这就将数据放入进去了额已经挂载完成

            }
            i++;
            this._items.push(item);
        });

上面这段代码是放置items到content中去的,同时可以

this.getShowCountCYC();

 

 

 

 类似资料: