增加大图轮播

This commit is contained in:
zhl 2019-02-25 17:36:42 +08:00
parent 17c2df2b0e
commit 8385225c5d
2 changed files with 439 additions and 20 deletions

View File

@ -27,17 +27,23 @@
}, },
{ {
"__id__": 11 "__id__": 11
},
{
"__id__": 15
},
{
"__id__": 19
} }
], ],
"_active": true, "_active": true,
"_level": 1, "_level": 1,
"_components": [ "_components": [
{ {
"__id__": 17 "__id__": 25
} }
], ],
"_prefab": { "_prefab": {
"__id__": 18 "__id__": 26
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -186,6 +192,210 @@
"fileId": "3206pHeSJH25Pu5zTD4rJo", "fileId": "3206pHeSJH25Pu5zTD4rJo",
"sync": false "sync": false
}, },
{
"__type__": "cc.Node",
"_name": "001",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_level": 2,
"_components": [
{
"__id__": 6
}
],
"_prefab": {
"__id__": 7
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 750,
"height": 1161
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_position": {
"__type__": "cc.Vec3",
"x": -750,
"y": 13,
"z": 0
},
"_scale": {
"__type__": "cc.Vec3",
"x": 1,
"y": 1,
"z": 1
},
"_rotationX": 0,
"_rotationY": 0,
"_quat": {
"__type__": "cc.Quat",
"x": 0,
"y": 0,
"z": 0,
"w": 1
},
"_skewX": 0,
"_skewY": 0,
"_zIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
},
"_enabled": true,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "4fb115d2-58e4-4b9b-badd-a26ca28a7f78"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_state": 0,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "9c00729f-1f46-4905-a9e1-bc0e74feb37c"
},
"fileId": "85E5UZo7hNDIacG5+ORmsl",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "003",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_level": 2,
"_components": [
{
"__id__": 9
}
],
"_prefab": {
"__id__": 10
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 750,
"height": 1161
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_position": {
"__type__": "cc.Vec3",
"x": 750,
"y": 13,
"z": 0
},
"_scale": {
"__type__": "cc.Vec3",
"x": 1,
"y": 1,
"z": 1
},
"_rotationX": 0,
"_rotationY": 0,
"_quat": {
"__type__": "cc.Quat",
"x": 0,
"y": 0,
"z": 0,
"w": 1
},
"_skewX": 0,
"_skewY": 0,
"_zIndex": 0,
"groupIndex": 0,
"_id": ""
},
{
"__type__": "cc.Sprite",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
},
"_enabled": true,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "fcbed040-f45d-4fe3-8c6a-1dadd55aee22"
},
"_type": 0,
"_sizeMode": 0,
"_fillType": 0,
"_fillCenter": {
"__type__": "cc.Vec2",
"x": 0,
"y": 0
},
"_fillStart": 0,
"_fillRange": 0,
"_isTrimmedMode": true,
"_state": 0,
"_atlas": null,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "9c00729f-1f46-4905-a9e1-bc0e74feb37c"
},
"fileId": "83Q8Za8eFB8rdVssFCys9w",
"sync": false
},
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "arrow_right", "_name": "arrow_right",
@ -198,11 +408,14 @@
"_level": 4, "_level": 4,
"_components": [ "_components": [
{ {
"__id__": 6 "__id__": 12
},
{
"__id__": 13
} }
], ],
"_prefab": { "_prefab": {
"__id__": 7 "__id__": 14
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -254,7 +467,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 5 "__id__": 11
}, },
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
@ -277,6 +490,59 @@
"_atlas": null, "_atlas": null,
"_id": "" "_id": ""
}, },
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
},
"_enabled": true,
"transition": 0,
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 214,
"g": 214,
"b": 214,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": {
"__id__": 11
},
"_id": ""
},
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
@ -300,11 +566,14 @@
"_level": 4, "_level": 4,
"_components": [ "_components": [
{ {
"__id__": 9 "__id__": 16
},
{
"__id__": 17
} }
], ],
"_prefab": { "_prefab": {
"__id__": 10 "__id__": 18
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -356,7 +625,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 8 "__id__": 15
}, },
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
@ -379,6 +648,59 @@
"_atlas": null, "_atlas": null,
"_id": "" "_id": ""
}, },
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 15
},
"_enabled": true,
"transition": 0,
"pressedColor": {
"__type__": "cc.Color",
"r": 211,
"g": 211,
"b": 211,
"a": 255
},
"hoverColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"duration": 0.1,
"zoomScale": 1.2,
"clickEvents": [],
"_N$interactable": true,
"_N$enableAutoGrayEffect": false,
"_N$normalColor": {
"__type__": "cc.Color",
"r": 214,
"g": 214,
"b": 214,
"a": 255
},
"_N$disabledColor": {
"__type__": "cc.Color",
"r": 124,
"g": 124,
"b": 124,
"a": 255
},
"_N$normalSprite": null,
"_N$pressedSprite": null,
"pressedSprite": null,
"_N$hoverSprite": null,
"hoverSprite": null,
"_N$disabledSprite": null,
"_N$target": {
"__id__": 15
},
"_id": ""
},
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
@ -399,18 +721,18 @@
}, },
"_children": [ "_children": [
{ {
"__id__": 12 "__id__": 20
} }
], ],
"_active": true, "_active": true,
"_level": 4, "_level": 4,
"_components": [ "_components": [
{ {
"__id__": 15 "__id__": 23
} }
], ],
"_prefab": { "_prefab": {
"__id__": 16 "__id__": 24
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -462,18 +784,18 @@
"_name": "btn_title_4", "_name": "btn_title_4",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 11 "__id__": 19
}, },
"_children": [], "_children": [],
"_active": true, "_active": true,
"_level": 4, "_level": 4,
"_components": [ "_components": [
{ {
"__id__": 13 "__id__": 21
} }
], ],
"_prefab": { "_prefab": {
"__id__": 14 "__id__": 22
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -525,7 +847,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 12 "__id__": 20
}, },
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
@ -564,7 +886,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 11 "__id__": 19
}, },
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
@ -606,6 +928,22 @@
"__id__": 1 "__id__": 1
}, },
"_enabled": true, "_enabled": true,
"leftBtn": {
"__id__": 15
},
"rightBtn": {
"__id__": 11
},
"currentNode": {
"__id__": 2
},
"leftNode": {
"__id__": 5
},
"rightNode": {
"__id__": 8
},
"currentIdx": 2,
"_id": "" "_id": ""
}, },
{ {

View File

@ -2,17 +2,98 @@ cc.Class({
extends: cc.Component, extends: cc.Component,
properties: { properties: {
leftBtn: {
default: null,
type: cc.Node
},
rightBtn: {
default: null,
type: cc.Node
},
currentNode: {
default: null,
type: cc.Node
},
leftNode: {
default: null,
type: cc.Node
},
rightNode: {
default: null,
type: cc.Node
},
currentIdx: 2,
scrolling: false
}, },
// LIFE-CYCLE CALLBACKS: // LIFE-CYCLE CALLBACKS:
onLoad () { onLoad() {
let self = this;
this.leftBtn.on('click', () => {
if (!self.scrolling) {
self.scrolling = true;
this.moveLeft();
}
});
this.rightBtn.on('click', () => {
if (!self.scrolling) {
self.scrolling = true;
self.moveRight();
}
})
}, },
start () { start() {
}, },
// update (dt) {}, // update (dt) {},
moveLeft: function () {
let self = this;
let moveFinish = cc.callFunc(function () {
self.currentIdx ++;
if (self.currentIdx > 4) {
self.currentIdx = 0;
}
let nextIdx = self.currentIdx === 4 ? 0 : self.currentIdx + 1;
let tmp = self.leftNode;
self.leftNode = self.currentNode;
self.currentNode = self.rightNode;
self.rightNode = tmp;
let url = 'textures/part4/00' + nextIdx;
cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
self.rightNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
});
self.scrolling = false;
}, this, {});
let moveCurrent = cc.moveTo(0.5, -750, 13);
var seq = cc.sequence(moveCurrent, moveFinish);
self.currentNode.runAction(seq);
self.rightNode.runAction(cc.moveTo(0.5, 0, 13));
self.leftNode.position = cc.v2(750, 13);
},
moveRight: function () {
let self = this;
let moveFinish = cc.callFunc(function () {
self.currentIdx --;
if (self.currentIdx < 0) {
self.currentIdx = 4;
}
let nextIdx = self.currentIdx === 0 ? 4 : self.currentIdx - 1;
self.rightNode.position = cc.v2(-750, 13);
let tmp = self.rightNode;
self.rightNode = self.currentNode;
self.currentNode = self.leftNode;
self.leftNode = tmp;
let url = 'textures/part4/00' + nextIdx;
cc.loader.loadRes(url, cc.SpriteFrame, function (err, spriteFrame) {
self.leftNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
});
self.scrolling = false;
}, this, {});
let moveCurrent = cc.moveTo(0.5, 750, 13);
var seq = cc.sequence(moveCurrent, moveFinish);
self.currentNode.runAction(seq);
self.leftNode.runAction(cc.moveTo(0.5, 0, 13));
}
}); });