Laya的List組件+滾動條

版本：2.2.0

官網教程：https://ldc2.layabox.com/doc/?nav=zh-ts-3-3-7

 

下面以《緋雨騎士團》的服務器選擇列表為例子。

 

 一 創建List

首先創建一個List組件，我命名為serverList。 （不用像laya教程里那樣，還要轉換類型什么的，太麻煩）

 

設置list的renderType屬性為render，不設置沒法滾動。

 

 二 創建Item

然后創建List的Item組件。我這里item是一個scene自定義組件。（因為自定義組件里能放各種花里浮哨的東西滿足需求）

官網教程里用的Box作為Item

 

 三 創建滾動條

方法1：拖動comp/vscroll.png到list的vScrollBarSkin屬性上。不設置的話這個容器沒法滾動。

不知道怎么具體擺位置，滾動條的位置總是在最右邊，只能設置list的高寬，讓滾動條顯示到合適位置。

 

方法2：創建一個滾動條VScrollBar到list組件內，並設置name為scrollBar(注意是name不是var！！！)，這個可以自己隨便擺位置。推薦用這個方法。

 

 

四 代碼里使用 

1. Laya.Hander一定要設置once為false，不然只執行一次，要像Laya教程里那么寫，就吃翔了。

2. onUpdateItem會在select觸發后，所有可見的item都會觸發一次這個函數。

3. onselect 會在點擊一個item后觸發。

4. 根據上面的特性，要做一個選中的服務器按鈕高亮的效果，那么就是在onselect獲取選中的按鈕index，在onupdateitem里判斷，如果是選中按鈕則高亮，不是選中按鈕則不高亮。 

 

import { ui } from "../../../../../ui/layaMaxUI";
import ServerItem from "./ServerItem";

export default class ServerPanel extends ui.login.ServerPanelUI {
   
    constructor() { 
        super(); 
    }
    
    onEnable(): void {
        //設置item項
        this.serverList.itemRender = ServerItem;
        //設置渲染處理
        this.serverList.renderHandler = Laya.Handler.create(this, this.onUpdateItem,null,false);
        //設置選擇處理
        this.serverList.selectHandler = Laya.Handler.create(this, this.onSelect,null,false);
        //設置數據
        this.serverList.array = ["1-100服","101-200服","201-300服","301-400服","401-500服","501-600服","601-700服","701-800服","801-900服"];
    }

    onDisable(): void {

    }

    //渲染處理
    private onUpdateItem(cell:ServerItem, index:number){
        console.log("update:", index);
        cell.btn.text.text = cell.dataSource;
    }

    //選擇處理 
    private onSelect(index:number){
        console.log("select:", index);
    }
}

　　

實際效果