1. 程式人生 > >微信小遊戲-CocosCreator 基礎(二十三)

微信小遊戲-CocosCreator 基礎(二十三)

滾動列表:排行榜 contont錨點在最上方 其他錨點在中間

engine=》scrollView.js=》發現自動滾動會改變content的y值

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

===================================================== 注意點:自動滾動,回彈,content,

/* 顯示[1, 100]這個資料 (1)我們將我們滾動列表裡面的每個項分成三個頁 (2)每一個頁面我們制定一個數目,例如8個,根據你的scrollview的大小來決定; (3)總共使用的滾動列表裡面的想 PAGE_NUM * 3 = 24個; (4) 有限的項要顯示 超過它數目的資料記錄?

*/

cc.Class({     extends: cc.Component,

    properties: {              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     //開始的時候載入24項     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();     }, });