添加一个展示物品的自动无限循环的scrollView

DisplayScrollViewDemo/.gitignore

@@ -0,0 +1,51 @@
+#/////////////////////////////////////////////////////////////////////////////
+# Fireball Projects
+#/////////////////////////////////////////////////////////////////////////////
+
+/library/
+/temp/
+/local/
+/build/
+
+#/////////////////////////////////////////////////////////////////////////////
+# npm files
+#/////////////////////////////////////////////////////////////////////////////
+
+npm-debug.log
+node_modules/
+
+#/////////////////////////////////////////////////////////////////////////////
+# Logs and databases
+#/////////////////////////////////////////////////////////////////////////////
+
+*.log
+*.sql
+*.sqlite
+
+#/////////////////////////////////////////////////////////////////////////////
+# files for debugger
+#/////////////////////////////////////////////////////////////////////////////
+
+*.sln
+*.pidb
+*.suo
+
+#/////////////////////////////////////////////////////////////////////////////
+# OS generated files
+#/////////////////////////////////////////////////////////////////////////////
+
+.DS_Store
+ehthumbs.db
+Thumbs.db
+
+#/////////////////////////////////////////////////////////////////////////////
+# WebStorm files
+#/////////////////////////////////////////////////////////////////////////////
+
+.idea/
+
+#//////////////////////////
+# VS Code files
+#//////////////////////////
+
+.vscode/

DisplayScrollViewDemo/README.md

@@ -0,0 +1,2 @@
+# hello-world
+Hello world new project template.

DisplayScrollViewDemo/assets/Display.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "9e85e619-6523-4291-9caf-cedf05542577",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Display/NavigateItem.ts

@@ -0,0 +1,8 @@
+
+export class NavigateItem {
+    public name: string = null;
+    public icon: string = null;
+    public appId: string = null;
+    public path: string = null;
+    public bgColor: string = null;
+}

DisplayScrollViewDemo/assets/Display/NavigateItem.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "f4e332f4-4dc0-47a1-aaeb-aa264ec86014",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Display/NavigateItemPlusView.ts

@@ -0,0 +1,28 @@
+
+import { NavigateItem } from "./NavigateItem";
+import NavigateItemView from "./NavigateItemView";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class NavigateItemPlusView extends cc.Component {
+
+    @property([NavigateItemView])
+    list: NavigateItemView[] = [];
+
+    // onLoad () {}
+
+    start() {
+
+    }
+
+    init(data: NavigateItem[]) {
+        console.log('data', data);
+        for (let i = 0; i < data.length; i++) {
+            this.list[i].node.active = true;
+            this.list[i].init(data[i]);
+        }
+    }
+
+    // update (dt) {}
+}

DisplayScrollViewDemo/assets/Display/NavigateItemPlusView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "f8380bfd-2c7e-4fde-95c3-dfc319499d9d",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Display/NavigateItemView.ts

@@ -0,0 +1,64 @@
+
+import { NavigateItem } from "./NavigateItem";
+
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class NavigateItemView extends cc.Component {
+
+    @property(cc.Sprite)
+    icon: cc.Sprite = null;
+
+    @property(cc.Node)
+    bg: cc.Node = null;
+
+    @property(cc.Label)
+    title: cc.Label = null;
+
+    private info: NavigateItem = null;
+
+    // onLoad () {}
+
+    start() {
+
+    }
+
+    init(data: NavigateItem) {
+        this.info = data;
+        this.title.string = this.info.name;
+        this.bg.color = (new cc.Color()).fromHEX(data.bgColor);
+        this.loadIcon(data.icon);
+
+    }
+
+    onEventClick(event, custom) {
+        console.log('info', this.info.name);
+        this.navigateGame();
+    }
+
+    navigateGame() {
+        if (!window['wx']) {
+            return;
+        }
+        window['wx'].navigateToMiniProgram({
+            appId: this.info.appId,
+            path: this.info.path,
+            success(res) {
+                // 打开成功
+                console.log('打开成功');
+            },
+            fail(res) {
+                console.log('打开失败', res);
+            }
+        })
+    }
+
+    loadIcon(url) {
+        cc.loader.load(url, (err, texture) => {
+            console.log('err', err, texture);
+            this.icon.spriteFrame = new cc.SpriteFrame(texture);
+        })
+    }
+
+    // update (dt) {}
+}

DisplayScrollViewDemo/assets/Display/NavigateItemView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "02d579a5-1f05-46ec-9204-b53a49636553",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Display/NavigateView.ts

@@ -0,0 +1,209 @@
+import NavigateItemView from "./NavigateItemView";
+import { NavigateItem } from "./NavigateItem";
+import NavigateItemPlusView from "./NavigateItemPlusView";
+
+const { ccclass, property } = cc._decorator;
+
+enum Direct {
+    horizontal = 2,
+    vertical = 1,
+    grid = 3
+}
+
+const BgColorList = ['#edb879', '#1979a9', '#e07b39', '#69bdd2', '#80391e', '#cce7e8', '#b97455', '#44bcd8', '#7f39fb', '9acd32', '#ddbe5b'];
+
+@ccclass
+export default class NavigateView extends cc.Component {
+
+    @property(cc.Node)
+    content: cc.Node = null;
+    @property(cc.Node)
+    ItemPrefab: cc.Node = null;
+
+    @property(cc.Vec2)
+    speed: cc.Vec2 = new cc.Vec2(-10, 10);
+
+    @property({ type: cc.Enum(Direct) })
+    public dir: number = 1;
+
+    private itemSize: cc.Size = null;
+    private contentSize: cc.Size = null;
+    private startPos: cc.Vec2 = null;
+    private intervalSize: cc.Vec2 = null;
+
+    //当前conetent显示最大个数
+    private maxItemCount: cc.Vec2 = null;
+    //当前item个数
+    private itemCount: cc.Vec2 = null;
+
+    private direct: cc.Vec2 = new cc.Vec2(1, -1);
+
+    private borderPos: cc.Vec2 = null;
+
+    private itemList: Array<cc.Node> = [];
+
+    private isLoop: boolean = false;
+
+    private showIndex: number = 0;
+
+    private gameList: any[] = null;
+
+    private columnCount = 3;
+
+    // LIFE-CYCLE CALLBACKS:
+
+    onLoad() {
+        this.itemSize = cc.size(this.ItemPrefab.width, this.ItemPrefab.height);
+        this.contentSize = cc.size(this.content.width, this.content.height);
+        //当前conetent显示最大个数
+        this.maxItemCount = cc.v2(Math.floor(this.contentSize.width / this.itemSize.width), Math.floor(this.contentSize.height / this.itemSize.height));
+        this.itemCount = cc.v2(this.maxItemCount.x + 2, this.maxItemCount.y + 2);
+
+        this.borderPos = cc.v2(-1 * Math.abs(this.itemSize.width / 2), Math.abs(this.itemSize.height / 2));
+        this.startPos = cc.v2(this.direct.x * this.itemSize.width / 2, this.direct.y * this.itemSize.height / 2);
+        this.intervalSize = cc.v2(this.direct.x * this.itemSize.width, Math.abs(this.direct.y * this.itemSize.height));
+        if (this.dir == Direct.vertical || this.dir == Direct.grid) {
+            this.startPos.x = 0;
+            this.intervalSize.x = 0;
+        } else {
+            this.startPos.y = 0;
+            this.intervalSize.y = 0;
+        }
+
+        this.initItems();
+        this.onLoadData();
+    }
+
+    onLoadData() {
+        let data = [];
+        for (let i = 0; i < 10; i++) {
+            let item = new NavigateItem();
+            item.appId = '' + i;
+            item.name = 'item_' + i;
+            data.push(item);
+        }
+        this.initList(data);
+    }
+
+    start() {
+
+    }
+
+    initList(data: NavigateItem[]) {
+        let list: any[] = [];
+        //向上取整，
+        let len = Math.ceil(data.length / this.columnCount) * this.columnCount;
+        for (let i = 0; i < len; i++) {
+            let item = new NavigateItem();
+            //铺满数据
+            let pram = data[i % data.length];
+            item.appId = pram.appId;
+            item.icon = pram.icon;
+            item.name = pram.name;
+            item.path = '';
+            item.bgColor = BgColorList[i] || BgColorList[0];
+
+            if (this.dir != Direct.grid) {
+                list.push(item);
+            } else {
+                let row = Math.floor(i / this.columnCount);
+                if (list[row] == undefined) {
+                    list.push([]);
+                }
+                list[row].push(item);
+            }
+        }
+        this.init(list);
+    }
+
+    initItems() {
+        this.itemList.push(this.ItemPrefab);
+        this.ItemPrefab.position = cc.v2(this.startPos.x, this.startPos.y);
+        this.ItemPrefab.active = false;
+        let prop = 'x';
+        if (this.dir == Direct.vertical || this.dir == Direct.grid) {
+            prop = 'y';
+        }
+        for (let i = 1; i < this.itemCount[prop]; i++) {
+            let item = cc.instantiate(this.ItemPrefab);
+            this.content.addChild(item);
+            item.position = cc.v2(this.startPos.x + this.direct.x * this.intervalSize.x * i, this.startPos.y + this.direct.y * this.intervalSize.y * i);
+            item.name = 'item_' + i;
+            this.itemList.push(item);
+        }
+    }
+
+    init(list: any[]) {
+        this.gameList = list;
+        let prop = 'x';
+        if (this.dir == Direct.vertical || this.dir == Direct.grid) {
+            prop = 'y';
+        }
+
+        let len: number = list.length;
+        this.isLoop = true;
+
+        len = this.itemCount[prop];
+        //把this.itemCount成员设置数据
+        for (let i = 0; i < len; i++) {
+            this.showIndex = i;
+            //可能出现len>this.gameList的情况。
+            this.showIndex = (this.showIndex) % this.gameList.length;
+            let item = this.itemList[i];
+            this.setItemInfo(item, list[this.showIndex]);
+        }
+    }
+
+    /**
+     * 
+     * @param node 
+     * @param info NavigateItem or NavigateItem[]
+     */
+    setItemInfo(node: cc.Node, info: any[]) {
+        node.active = true;
+        if (this.dir == Direct.grid) {
+            let view = node.getComponent(NavigateItemPlusView);
+            view.init(info);
+        } else {
+            let view = node.getComponent(NavigateItemView);
+            view.init(info);
+        }
+    }
+
+    onLoop(dt) {
+        if (!this.isLoop) return;
+        let prop = 'x';
+        if (this.dir == Direct.vertical || this.dir == Direct.grid) {
+            prop = 'y';
+        }
+        let speed = this.speed[prop] * dt;
+        //移动
+        this.itemList.forEach((item: cc.Node) => {
+            item[prop] += speed;
+        });
+
+        //是否过界
+        this.itemList.forEach((item: cc.Node, i: number) => {
+            let isBorder = false;
+            if (this.dir == Direct.vertical || this.dir == Direct.grid) {
+                isBorder = item[prop] > this.borderPos[prop];
+            } else {
+                isBorder = item[prop] < this.borderPos[prop];
+            }
+            if (isBorder) {
+                //找到上一个item的位置
+                let lastIndex = (i - 1 + this.itemList.length) % this.itemList.length;
+                //放到上一个item后面
+                item[prop] = this.itemList[lastIndex][prop] + this.direct[prop] * this.intervalSize[prop];
+                //当前显示的item下标
+                this.showIndex = (this.showIndex + 1) % this.gameList.length;
+                this.setItemInfo(item, this.gameList[this.showIndex]);
+            }
+
+        })
+    }
+
+    update(dt) {
+        this.onLoop(dt);
+    }
+}

DisplayScrollViewDemo/assets/Display/NavigateView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "7e33b492-e399-42e2-959c-8d7dbc4544e2",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Display/texture.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "ffc3495c-3c1e-4036-83af-f9ded67d5acd",
+  "isSubpackage": false,
+  "subpackageName": "",
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Display/texture/di.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "6ae4cb63-9339-482d-8295-8de6d9aff9b1",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 162,
+  "height": 196,
+  "platformSettings": {},
+  "subMetas": {
+    "di": {
+      "ver": "1.0.4",
+      "uuid": "c74d19dd-9ad1-42d2-9a21-c08de2224512",
+      "rawTextureUuid": "6ae4cb63-9339-482d-8295-8de6d9aff9b1",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 162,
+      "height": 196,
+      "rawWidth": 162,
+      "rawHeight": 196,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

DisplayScrollViewDemo/assets/Display/texture/kuang.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "49294db5-82ba-4c85-85c7-3fea9b4233a3",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 152,
+  "height": 152,
+  "platformSettings": {},
+  "subMetas": {
+    "kuang": {
+      "ver": "1.0.4",
+      "uuid": "1634b135-4a2d-448a-acf5-0751ba3038d6",
+      "rawTextureUuid": "49294db5-82ba-4c85-85c7-3fea9b4233a3",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 152,
+      "height": 152,
+      "rawWidth": 152,
+      "rawHeight": 152,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

DisplayScrollViewDemo/assets/Scene.meta

@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.1",
+  "uuid": "29f52784-2fca-467b-92e7-8fd9ef8c57b7",
+  "isGroup": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Scene/helloworld.fire.meta

@@ -0,0 +1,7 @@
+{
+  "ver": "1.2.7",
+  "uuid": "2d2f792f-a40c-49bb-a189-ed176a246e49",
+  "asyncLoadAssets": false,
+  "autoReleaseAssets": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Script.meta

@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.1",
+  "uuid": "4734c20c-0db8-4eb2-92ea-e692f4d70934",
+  "isGroup": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Script/HelloWorld.js

@@ -0,0 +1,22 @@
+cc.Class({
+    extends: cc.Component,
+
+    properties: {
+        label: {
+            default: null,
+            type: cc.Label
+        },
+        // defaults, set visually when attaching this script to the Canvas
+        text: 'Hello, World!'
+    },
+
+    // use this for initialization
+    onLoad: function () {
+        this.label.string = this.text;
+    },
+
+    // called every frame
+    update: function (dt) {
+
+    },
+});

DisplayScrollViewDemo/assets/Script/HelloWorld.js.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.8",
+  "uuid": "280c3aec-6492-4a9d-9f51-a9b00b570b4a",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Texture.meta

@@ -0,0 +1,6 @@
+{
+  "ver": "1.0.1",
+  "uuid": "7b81d4e8-ec84-4716-968d-500ac1d78a54",
+  "isGroup": false,
+  "subMetas": {}
+}

DisplayScrollViewDemo/assets/Texture/HelloWorld.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "6aa0aa6a-ebee-4155-a088-a687a6aadec4",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 195,
+  "height": 270,
+  "platformSettings": {},
+  "subMetas": {
+    "HelloWorld": {
+      "ver": "1.0.4",
+      "uuid": "31bc895a-c003-4566-a9f3-2e54ae1c17dc",
+      "rawTextureUuid": "6aa0aa6a-ebee-4155-a088-a687a6aadec4",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 195,
+      "height": 270,
+      "rawWidth": 195,
+      "rawHeight": 270,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

DisplayScrollViewDemo/assets/Texture/singleColor.png.meta

@@ -0,0 +1,36 @@
+{
+  "ver": "2.3.4",
+  "uuid": "a8027877-d8d6-4645-97a0-52d4a0123dba",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 2,
+  "height": 2,
+  "platformSettings": {},
+  "subMetas": {
+    "singleColor": {
+      "ver": "1.0.4",
+      "uuid": "410fb916-8721-4663-bab8-34397391ace7",
+      "rawTextureUuid": "a8027877-d8d6-4645-97a0-52d4a0123dba",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 2,
+      "height": 2,
+      "rawWidth": 2,
+      "rawHeight": 2,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

DisplayScrollViewDemo/jsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "module": "commonjs",
+        "experimentalDecorators": true
+    },
+    "exclude": [
+        "node_modules",
+        ".vscode",
+        "library",
+        "local",
+        "settings",
+        "temp"
+    ]
+}

DisplayScrollViewDemo/project.json

@@ -0,0 +1,8 @@
+{
+  "engine": "cocos2d-html5",
+  "packages": "packages",
+  "version": "2.3.4",
+  "name": "DisplayDemo",
+  "id": "406e2846-e6d9-4a03-8987-c92356e9bf92",
+  "isNew": false
+}

DisplayScrollViewDemo/settings/builder.json

@@ -0,0 +1,13 @@
+{
+  "excludeScenes": [],
+  "orientation": {
+    "landscapeLeft": true,
+    "landscapeRight": true,
+    "portrait": false,
+    "upsideDown": false
+  },
+  "packageName": "org.cocos2d.helloworld",
+  "startScene": "2d2f792f-a40c-49bb-a189-ed176a246e49",
+  "title": "hello_world",
+  "webOrientation": "auto"
+}

DisplayScrollViewDemo/settings/builder.panel.json

@@ -0,0 +1,7 @@
+{
+  "excludeScenes": [],
+  "packageName": "org.cocos2d.helloworld",
+  "platform": "web-mobile",
+  "startScene": "2d2f792f-a40c-49bb-a189-ed176a246e49",
+  "title": "HelloWorld"
+}

DisplayScrollViewDemo/settings/project.json

@@ -0,0 +1,36 @@
+{
+  "collision-matrix": [
+    [
+      true
+    ]
+  ],
+  "excluded-modules": [],
+  "group-list": [
+    "default"
+  ],
+  "start-scene": "2d2f792f-a40c-49bb-a189-ed176a246e49",
+  "design-resolution-width": 960,
+  "design-resolution-height": 640,
+  "fit-width": false,
+  "fit-height": true,
+  "use-project-simulator-setting": false,
+  "simulator-orientation": false,
+  "use-customize-simulator": false,
+  "simulator-resolution": {
+    "width": 960,
+    "height": 640
+  },
+  "last-module-event-record-time": 0,
+  "assets-sort-type": "name",
+  "facebook": {
+    "enable": false,
+    "appID": "",
+    "live": {
+      "enable": false
+    },
+    "audience": {
+      "enable": false
+    }
+  },
+  "migrate-history": []
+}

DisplayScrollViewDemo/settings/services.json

@@ -0,0 +1,6 @@
+{
+	"game": {
+		"name": "未知游戏",
+		"appid": "UNKNOW"
+	}
+}

DisplayScrollViewDemo/template.json

@@ -0,0 +1,5 @@
+{
+	"name": "TEMPLATES.helloworld.name",
+	"desc": "TEMPLATES.helloworld.desc",
+	"banner": "template-banner.png"
+}

DisplayScrollViewDemo/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "lib": [ "es2015", "es2017", "dom" ],
+    "target": "es5",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "outDir": "temp/vscode-dist",
+    "forceConsistentCasingInFileNames": true
+  },
+  "exclude": [
+    "node_modules",
+    "library",
+    "local",
+    "temp",
+    "build",
+    "settings"
+  ]
+}