Cocos Creator移動端滾動清單元件-Ts版

ListView-for-CocosCreator

專用于Cocos creator的TS版 滾動清單 元件

該元件優化了節點性能，可定制化資料和功能，優化多節點清單顯示性能。

該元件繼承了scroll-view元件，需要類似scroll-view設定mask節點和content節點。

其他功能類似scroll-view元件，但隻支援豎排滾動或水準滾動，暫不支援橫豎滾動。

使用方法

1. 将腳本挂載到所需适配的節點上
2. 設定mask節點和content節點，設定滾動方向等屬性
3. 設定mask節點中心點為(0, 1)，content節點中心點為(0, 1)
4. 制作子節點預制體，将listViewItem腳本或者将繼承listViewItem類的腳本挂載到子節點預制體上
5. 設定子節點寬度和高度（暫不支援自适應擷取寬高度），設定子節點預制體
6. 設定内部Padding屬性
7. 設定子節點間隔屬性
8. 在onload或之後回調 調用**listView.init()**函數，具體使用方法和傳參請看下面的詳情

9. 如頁面已經處于激活狀态，則自動渲染子節點，如頁面目前處于非激活狀态，則在激活時調用scrollNow函數

   如下圖示例：

   

元件暴露函數和資料類

/**
 * 子節點資料類
 */
class itemList {
    id: number;
    // 是否被使用
    onUse?: boolean = false;
    // 子節點
    target?: cc.Node = null;
    // 子節點控制類
    targetComponent?: ListViewItem = null;
    // 子節點控制類名
    targetComponentClass?: string;
    // 自定義資料
    data?: any;
}

/**
 * init函數所用的清單資料類
 */
class initDataClass {
    // 子節點控制類名（如設定了這個則預設不使用list子資料裡的子節點控制類名
    className?: string = '';
    // 子節點資料清單
    list: itemList[] = [];
}

/**
 * 元件設定子節點資料類
 */
class itemPropClass {
	// 子節點寬度
	itemWidth: number = 0;
	// 子節點高度
	itemHeight: number = 0;
	// 子節點預制體
	itemPrefab: cc.Prefab = null;
}

/**
 * 元件設定内邊距資料類
 */
class paddingClass {
	// 頂部邊距
	top: number = 0;
	// 左邊距
	left: number = 0;
	// 右邊距
	right: number = 0;
	// 底部邊距
	bottom: number = 0;
}

/**
 * 元件設定子節點間距資料類
 */
class spacingClass {
	// 水準間距
	spacingX: number = 0;
	// 豎排間距
	spacingY: number = 0;
}

/**
 * 主元件
 */
class ListViewCompent extends cc.Component {
	// 内容節點
	content: cc.Node;
	// 遮罩節點
	mask: cc.Node;
	// 子節點資料
	itemData: itemPropClass;
	// 内容内邊距
	padding: paddingClass;
	// 子節點間距
	spacing: spacingClass;
	// 開啟水準滾動
	horizontal: boolean;
	// 開啟豎排滾動
	vertical: boolean;
	// ...其他跟scrollView一緻

	/**
     * 初始化資料清單，包括 計算相關資訊、生成節點等操作
     * @param _dataList 節點資料
     */
    init(_dataList: initDataClass) {}

	/**
     * 立即滾動，此函數用于滾動一下生成對應的子節點
     */
    scrollNow () {}

	/**
	 * 水準滾動至最右邊時會觸發，豎排滾動至最底部時會觸發
	 */
	scrollToEndCall () {}
}

/**
 * 子節點元件類
 */
class ListViewItem extends cc.Component {

    initData(_data: itemList) {
        // 自己建立的腳本繼承這個類，在item使用時會調用此方法
        // 可以在自定義初始化或者做其他操作
		// _data 會傳本身的 資料
    }
}
           

通過暴露的資料類和函數，我們可以很簡單的操控這個元件，可随意添加新的功能，如：到底自動加載更多資料或下拉重新整理等。

可通過設定節點資料清單中的 onUse 來控制是否渲染，如果 onUse 處于false狀态，滾動到屬于該子節點位置時就會自動渲染一個節點繼承該子節點，否則則不渲染該子節點。

init函數中的 className 則是用于擷取控制元件的名，設定 className 時預設使用全局的 className 而不使用 子節點的 className 去擷取。

子節點元件類中的initData則是可以自由的覆寫，實作初始化子節點的顯示效果等操作。

github位址為：https://github.com/kenvschen/ListView-for-CocosCreator

如有問題或者錯誤可私信我或者評論，謝謝大家觀看！