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

制作预制体

为content添加layout组件

为scrollview中的content节点添加Layout组件，type属性设置为垂直(VERTICAL)布局，Resize Mode属性设置为CONTAINER

属性准备

    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();
    },

效果：

自动加载100项数据就完成啦