cocos Creator中 PageView组件横向应用

1.PageView画布布局

PageView组件的应用，其实就是对视图的增删改查的操作，CURD

这里cocos工具自带的有三个页面，其实PageView组件很类似web前端中的轮播图，只不过这次要对其进行CURD的操作，

建好这个之后，既然要对它进行CURD操作，那么我们就要有操作它的按钮，在画布下创建几个按钮节点。

在创建一个文本节点，放到PageView组件的上部空白部分，方便我们看到当前是哪一页。

2.创建脚本码字母

画布布置好之后，我们要建立一个脚本，将脚本挂载到画布上，  脚本中应该有CURD的方法，还要有一个监听的方法，把监听的方法挂到PageView组件属性中。

在我们创建的按钮中分别绑定点击事件，

properties: {
        curNum: 3, // 当前页数
        curTotal: 10, //可支持最大页数
        pageTeample: cc.Prefab, //预制体资源
        target: cc.PageView, // 组件节点
        label: cc.Label //文本节点
    },  

    //  创建预制页面，随机颜色
    _createPage () {
        var page = cc.instantiate(this.pageTeample);
        page.position = new cc.v2(0, 0);
        var color = new cc.Color();
        color.r = Math.floor(Math.random() * 255);
        color.g = Math.floor(Math.random() * 255);
        color.b = Math.floor(Math.random() * 255);
        page.color = color;
        return page;
    },

    onLoad () {
        // 设置的当前页面为 1
        this.target.setCurrentPageIndex(0);
    },

    update () {
        // 当前页面索引
        this.label.string = "第" + (this.target.getCurrentPageIndex() + 1) + "页";
    },

    // 返回首页
    onJumpHome () {
        // 第二个参数为滚动所需时间，默认值为 0.3 秒
        this.target.scrollToPage(0);
    },

    // 添加页面
    onAddPage () {
        this.plusPage(() => {
            this.target.addPage(this._createPage());
        });
    },

    // 插入当前页面
    onInsertPage () {
        this.plusPage(() => {
            this.target.insertPage(this._createPage(), this.target.getCurrentPageIndex());
        });
    },

    // 移除页面
    onRemovePage () {
        this.lessPageNum(() => {
            var pages = this.target.getPages();
            this.target.removePage(pages[pages.length - 1]);
        });
    },

    // 移除当前页面
    onRemovePageAtIndex () {
        this.lessPageNum(() => {
            this.target.removePageAtIndex(this.target.getCurrentPageIndex());
        });
    },

    // 移除所有页面
    onRemoveAllPage () {
        this.target.removeAllPages();
        this.curNum = 0;
    },


    // 监听事件
    onPageEvent (sender, eventType) {
        // 翻页事件
        if (eventType !== cc.PageView.EventType.PAGE_TURNING) {
            return;
        }
        console.log("当前所在的页面索引:" + sender.getCurrentPageIndex());
    },

    // 添加页面
    plusPage (callback) {
        if (this.curNum > this.curTotal) {
            return;
        }
        this.curNum++;
        if (callback) {
            callback();
        }
    },

    // 减少页面
    lessPageNum (callback) {
        if (this.curNum <= 0) {
            return;
        }
        this.curNum--;
        if (callback) {
            callback();
        }
    },

直接码上，这里有六种方法点击事件。

---

• 语

这只是PageView组件的一种横向形式，还有纵向行驶，相信会用组件的横向形式了，那么纵向形式也该难不倒我们大家吧，如果小伙伴们还搞不出纵向形式的话，小子不才愿给大家写出模板样式，望各位同道中人积极响应。

• 曲

上篇为大家写出  梦回当年古战场  的霸气歌曲

此篇 为大家献上 幕夏 一曲

西月东落天色微曜
半樽清酒斟得逍遥
白衣纵马风流年少
佳人倾城回眸浅笑
玉笛声声月色皎皎
起舞翩翩清影窈窕
姻缘树下共求月老
执手暮暮朝朝