欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

cocos creator学习16——滚动列表数据的动态加载

程序员文章站 2022-05-27 16:12:06
...

制作预制体

cocos creator学习16——滚动列表数据的动态加载

为content添加layout组件

为scrollview中的content节点添加Layout组件,type属性设置为垂直(VERTICAL)布局,Resize Mode属性设置为CONTAINER
cocos creator学习16——滚动列表数据的动态加载

属性准备

    properties: {
        HIGH:80,   //每一项的高度
        PAGE_NUM:8,  //每一页8个项
        item_prefab:{  //项的资源预制体
            type:cc.Prefab,
            default:null,
        },
        scroll_view:{ //获取scrollview组件
            type:cc.ScrollView,
            default:null,
        },

代码实现

onLoad初始化加载项

onLoad () {
         this.value_set=[];
         for(var i=1;i<=100;i++)
         {
             this.value_set.push(i);
         }
         this.content = this.scroll_view.content;
         this.opt_item_set = [];
         //每次加载3页
         for(var i=0;i<this.PAGE_NUM*3;i++)
         {
             var item = cc.instantiate(this.item_prefab);
             this.content.addChild(item);
             this.opt_item_set.push(item);
         }
         this.scroll_view.node.on("scroll-ended",this.on_scroll_ended.bind(this),this);//监听scrollview事件
     },

实现显示记录

 load_recode:function(start_index){
        this.start_index=start_index;
         for(var i = 0;i<this.PAGE_NUM*3;i++){
           var label = this.opt_item_set[i].getChildByName("Label").getComponent(cc.Label);
            //显示记录
           label.string = this.value_set[this.start_index+i];
       }
    },

在start中编写索引

 start () {
        this.start_y = this.content.y;//初始化起始y坐标
       this.start_index = 0; //100项数据里面的起始数据记录索引
        this.load_recode(this.start_index);
    },

动态加载核心代码

update(dt) 中持续调用

 load_scroll_recode:function(){
        //向下加载数据
        //当开始位置比value_set的长度小则代表没加载完
         if(this.start_index + this.PAGE_NUM * 3 < this.value_set.length &&
          this.content.y >= this.start_y + this.PAGE_NUM * 2 * this.HIGH)//content超过2个PAGE的高度
        {
            //_autoScrolling在引擎源码中负责处理scrollview的滚动动作
            if(this.scroll_view._autoScrolling){ //等自动滚动结束后再加载防止滚动过快,直接跳到非常后的位置
                this.scroll_view.elastic = false; //关闭回弹效果 美观
                return;
            }
            var down_loaded = this.PAGE_NUM; 
            this.start_index += down_loaded;

            if(this.start_index + this.PAGE_NUM * 3>this.value_set.length)
            {
                //超过数据范围的长度
                var out_len = this.start_index + this.PAGE_NUM * 3 - this.value_set.length;
                down_loaded -= out_len;
                this.start_index -= out_len;
            }
            this.load_recode(this.start_index);
            this.content.y -= down_loaded * this.HIGH;
            return;
        }
        //向上加载
        if(this.start_index>0 && this.content.y<=this.start_y)
        {
            if(this.scroll_view._autoScrolling){ 
                this.scroll_view.elastic = false;
                return;
             }
            var up_loaded = this.PAGE_NUM;
            this.start_index -= up_loaded;
            if(this.start_index<0){
                up_loaded +=this.start_index;
                this.start_index=0;
            }
            this.load_recode(this.start_index);
            this.content.y += up_loaded * this.HIGH;
        }
    },
     on_scroll_ended:function(){
        this.load_scroll_recode();
        this.scroll_view.elastic = true; //加载结束后自动滚动回弹开启
    },
     update (dt) {
       this.load_scroll_recode();
    },

效果:

cocos creator学习16——滚动列表数据的动态加载
自动加载100项数据就完成啦

相关标签: cocos creator