box-client/assets/script/core/view/JMPageView.js

cc.Class({
    extends: cc.Component,

    editor: {
        menu: '嘉米公用/JMPageView'
    },

    properties: {
        pageView: cc.PageView,
        contentPrefab: cc.Prefab
    },

    /**
     * 导出creator pageview接口
     * 避免this.pageView.pageView.getCurrentPageIndex()写法
     *
     * @author libo
     * @date 2019-04-29
     * @returns
     */
    getCurrentPageIndex () {
        return this.pageView.getCurrentPageIndex();
    },

    onLoad () {
        this.pageView.node.on('scroll-ended', this.handlePageScrollEnded, this);
        this.pageView.node.on('scrolling', this.handlePageScrolling, this);
        this.pageView.node.on('page-turning', this.handlePageTurning, this);
    },

    reloadData (data, cb) {
        this.data = data;
        this.cb = cb;

        this.pageView.removeAllPages();

        for (let i = 0; i < data.length; i++) {
            let node = new cc.Node(i);
            node.width = this.pageView.node.width;
            node.height = this.pageView.node.height;

            this.pageView.addPage(node);
        }

        // 默认显示第一页
        this.jumpPageByIdx(0);
    },

    /**
     * 根据索引刷新页面
     *
     * @author libo
     * @date 2019-04-29
     * @param {number} idx 页面索引
     * @returns
     */
    reloadPageByIdx (idx) {
        if (idx < 0 || idx >= this.data.length) {
            return;
        }
        let page = this.getPageByIdx(idx);
        let contentNode = cc.instantiate(this.contentPrefab);
        contentNode.parent = page;

        // 通过消息初始化预制体
        // contentNode.emit('jm_msg_reloadData', this.data[idx], this.cb);

        // 通过循环组件查询有没有reloadData初始化
        for (const cmpt of contentNode._components) {
            if (cmpt.reloadData) {
                cmpt.reloadData(this.data[idx], this.cb);
            }
        }
    },

    /**
     * 根据索引跳转到指定页面
     *
     * @author libo
     * @date 2019-04-29
     * @param {*} idx
     */
    jumpPageByIdx (idx) {
        // creator bug:
        // PageView的addPage 和 content的Layout ResizeMode CONTAINER冲突了
        // 强制调用updateLayout也一样无效
        // 所以需要加个定时器到下一帧执行 或者 默认给content一个大小并且关闭CONTAINER模式
        // 否则初始化调用的时候渲染不了界面
        this.scheduleOnce(() => {
            this.pageView.scrollToPage(idx);
        }, 0);
    },

    jumpPrePage () {
        let pageIdx = this.pageView.getCurrentPageIndex() - 1;
        if (!this.hasPageContentByIdx(pageIdx)) {
            this.reloadPageByIdx(pageIdx);
        }
        this.pageView.scrollToPage(pageIdx);
    },

    jumpNextPage () {
        let pageIdx = this.pageView.getCurrentPageIndex() + 1;
        if (!this.hasPageContentByIdx(pageIdx)) {
            this.reloadPageByIdx(pageIdx);
        }
        this.pageView.scrollToPage(pageIdx);
    },

    handlePageScrolling (sender) {
        let pageHeight = this.pageView.node.height;
        let PageWidth = this.pageView.node.width;
        let offsetPos = this.pageView.getScrollOffset();
        let currPageIdx = sender.getCurrentPageIndex();
        let newPageIdx = currPageIdx;

        let offset = 0;
        if (offsetPos.x != 0) {
            // 横向
            offset = currPageIdx * PageWidth + offsetPos.x;
        } else {
            // 纵向
            offset = currPageIdx * pageHeight - offsetPos.y;
        }

        newPageIdx;
        if (offset > 0) {
            newPageIdx -= 1;
        }
        if (offset < 0) {
            newPageIdx += 1;
        }

        if (!this.hasPageContentByIdx(currPageIdx)) {
            this.reloadPageByIdx(currPageIdx);
        }
        // if (!this.hasPageContentByIdx(newPageIdx)) {
        //     this.reloadPageByIdx(newPageIdx);
        // }
    },

    handlePageScrollEnded (sender) {
        let idx = sender.getCurrentPageIndex();
        this.removeOtherPagesContent(idx);
    },

    handlePageTurning (sender) {
        if (this.cb) {
            let idx = sender.getCurrentPageIndex();
            this.cb('pageTurnDone', idx);
        }
    },

    getPageByIdx (idx) {
        let pages = this.pageView.getPages();
        for (const page of pages) {
            if (page.name == idx) {
                return page;
            }
        }

        return undefined;
    },

    hasPageContentByIdx (idx) {
        let page = this.getPageByIdx(idx);
        if (page && page.childrenCount > 0) {
            return true;
        }
        return false;
    },

    removeOtherPagesContent (currIdx) {
        let pages = this.pageView.getPages();
        for (const page of pages) {
            if (page.name != currIdx) {
                page.removeAllChildren();
            }
        }
    }
});