在遊戲中,排行榜是經常需要使用到的地方;
加入有個排行榜有100個玩家的資料,我們怎麼使用滾動清單來實作呢?
動态加載清單的思路
1: 每個記錄是滾動清單裡面的一個項,我們将整個清單分為3頁,每頁固定的項的數目;
2: 一個PAGE的項最好超過滾動清單的大小;
3: 建立一個滾動清單, 每一個page為一個頁,共3個頁,每個page有8個項;
3 * 8 = 24個項, 用1-100來模拟資料記錄;
如下圖:
auto scroll細節問題
1: auto scroll有自己的控制content的位置的機制, 會導緻content的位置與我們加載時候的位置修改沖突,展現在快速滾動後的連續加載;
2: 處理細節:
(1)在判斷要加載的時候,先判斷目前是否在auto scroll模式, 如果是傳回;
(2)監聽autosocroll結束後抛出的end事件,在來計算加載;
(3) 當auto scroll滾動到最上頭的時候,會有回彈,那個時候發生了加載,是以 在要加載的時候,檢測到時autoscroll,關閉掉回彈的效果,等auto scroll end事件發生了以後再打開;
this.scroll_view.elastic = false;
this.scroll_view._autoScrolling
/*
顯示[1, 100]這個資料
(1)我們将我們滾動清單裡面的每個項分成三個頁
(2)每一個頁面我們制定一個數目,例如8個,根據你的scrollview的大小來決定;
(3)總共使用的滾動清單裡面的想 PAGE_NUM * 3 = 24個;
(4) 有限的項要顯示 超過它數目的資料記錄?
*/
cc.Class({
extends: cc.Component,
properties: {
// foo: {
// default: null, // The default value will be used only when the component attaching
// to a node for the first time
// url: cc.Texture2D, // optional, default is typeof default
// serializable: true, // optional, default is true
// visible: true, // optional, default is true
// displayName: 'Foo', // optional
// readonly: false, // optional, default is false
// },
// ...
OPT_HEIGHT: 80, // 每項的高度
PAGE_NUM: 8, // 每頁為8個;
item_prefab: {
type: cc.Prefab,
default: null,
},
scroll_view: {
type: cc.ScrollView,
default: null,
},
},
// use this for initialization
onLoad: function () {
this.value_set = [];
// 如果你這裡是排行榜,那麼你就push排行榜的資料;
for(var i = 1; i <= 100; i ++) {
this.value_set.push(i);
}
this.content = this.scroll_view.content;
this.opt_item_set = [];
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);
},
start: function() {
this.start_y = this.content.y;
this.start_index = 0; // 目前我們24個Item加載的 100項資料裡面的起始資料記錄的索引;
this.load_record(this.start_index);
},
// 從這個索引開始,加載資料記錄到我們的滾動清單裡面的選項
load_record: 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("src").getComponent(cc.Label);
// 顯示我們的記錄;
label.string = this.value_set[start_index + i];
}
},
on_scroll_ended: function() {
this.scrollveiw_load_recode();
this.scroll_view.elastic = true;
},
scrollveiw_load_recode: function() {
// 向下加載了
if (this.start_index + this.PAGE_NUM * 3 < this.value_set.length &&
this.content.y >= this.start_y + this.PAGE_NUM * 2 * this.OPT_HEIGHT) { // 動态加載
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_record(this.start_index);
this.content.y -= (down_loaded * this.OPT_HEIGHT);
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_record(this.start_index);
this.content.y += (up_loaded * this.OPT_HEIGHT);
}
// end
},
// called every frame, uncomment this function to activate update callback
update: function (dt) {
this.scrollveiw_load_recode();
},
});