cocos creator学习16——滚动列表数据的动态加载
程序员文章站
2022-05-27 16:12:06
...
制作预制体
为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项数据就完成啦