增加底部轮播图

This commit is contained in:
zhl 2019-02-25 17:51:51 +08:00
parent 8385225c5d
commit 0d614519ae
10 changed files with 702 additions and 42 deletions

View File

@ -19,28 +19,34 @@
{ {
"__id__": 2 "__id__": 2
}, },
{
"__id__": 5
},
{
"__id__": 8
},
{
"__id__": 11
},
{ {
"__id__": 14 "__id__": 14
},
{
"__id__": 17
},
{
"__id__": 20
},
{
"__id__": 23
},
{
"__id__": 27
} }
], ],
"_active": true, "_active": true,
"_level": 3, "_level": 1,
"_components": [ "_components": [
{ {
"__id__": 17 "__id__": 31
},
{
"__id__": 32
} }
], ],
"_prefab": { "_prefab": {
"__id__": 18 "__id__": 33
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -89,21 +95,94 @@
}, },
{ {
"__type__": "cc.Node", "__type__": "cc.Node",
"_name": "01", "_name": "img_view",
"_objFlags": 0, "_objFlags": 0,
"_parent": { "_parent": {
"__id__": 1 "__id__": 1
}, },
"_children": [], "_children": [
"_active": true,
"_level": 4,
"_components": [
{ {
"__id__": 3 "__id__": 3
},
{
"__id__": 6
},
{
"__id__": 9
}
],
"_active": true,
"_level": 2,
"_components": [
{
"__id__": 12
} }
], ],
"_prefab": { "_prefab": {
"__id__": 13
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 561,
"height": 316
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_position": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"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.Node",
"_name": "00",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_level": 3,
"_components": [
{
"__id__": 4 "__id__": 4
}
],
"_prefab": {
"__id__": 5
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -155,8 +234,110 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 3
},
"_enabled": true,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "e1f38a35-059c-4c5b-a11e-70c0f6a60e4c"
},
"_type": 0,
"_sizeMode": 1,
"_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__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "a0Gvn5289H4762itK9MPrI",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "01",
"_objFlags": 0,
"_parent": {
"__id__": 2 "__id__": 2
}, },
"_children": [],
"_active": true,
"_level": 3,
"_components": [
{
"__id__": 7
}
],
"_prefab": {
"__id__": 8
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 561,
"height": 316
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_position": {
"__type__": "cc.Vec3",
"x": 561,
"y": 0,
"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__": 6
},
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
@ -184,9 +365,241 @@
"__id__": 1 "__id__": 1
}, },
"asset": { "asset": {
"__id__": 0 "__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
}, },
"fileId": "20FDB8OFBMM6tkc44PKLBl", "fileId": "0coOX+1EhKRYYfcoEc0/Ld",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "04",
"_objFlags": 0,
"_parent": {
"__id__": 2
},
"_children": [],
"_active": true,
"_level": 3,
"_components": [
{
"__id__": 10
}
],
"_prefab": {
"__id__": 11
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 561,
"height": 316
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_position": {
"__type__": "cc.Vec3",
"x": -561,
"y": 0,
"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__": 9
},
"_enabled": true,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "9bcdc0f8-463e-49ff-a75d-df94b1f8faf1"
},
"_type": 0,
"_sizeMode": 1,
"_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__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "87pC85NhBPpYZtutR7+EQt",
"sync": false
},
{
"__type__": "cc.Mask",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 2
},
"_enabled": true,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": null,
"_type": 0,
"_segments": 64,
"_N$alphaThreshold": 0,
"_N$inverted": false,
"_id": ""
},
{
"__type__": "cc.PrefabInfo",
"root": {
"__id__": 1
},
"asset": {
"__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "84fyatUClCjpJ1+OJA+VIt",
"sync": false
},
{
"__type__": "cc.Node",
"_name": "border",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_level": 2,
"_components": [
{
"__id__": 15
}
],
"_prefab": {
"__id__": 16
},
"_opacity": 255,
"_color": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"a": 255
},
"_contentSize": {
"__type__": "cc.Size",
"width": 574,
"height": 334
},
"_anchorPoint": {
"__type__": "cc.Vec2",
"x": 0.5,
"y": 0.5
},
"_position": {
"__type__": "cc.Vec3",
"x": 0,
"y": 0,
"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__": 14
},
"_enabled": true,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "e8247d6f-22e8-4734-81dc-b397237ee6de"
},
"_type": 1,
"_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__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "3cXunFCuhHIrZKA7Dsj4+7",
"sync": false "sync": false
}, },
{ {
@ -201,11 +614,11 @@
"_level": 4, "_level": 4,
"_components": [ "_components": [
{ {
"__id__": 6 "__id__": 18
} }
], ],
"_prefab": { "_prefab": {
"__id__": 7 "__id__": 19
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -257,7 +670,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 5 "__id__": 17
}, },
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
@ -286,7 +699,7 @@
"__id__": 1 "__id__": 1
}, },
"asset": { "asset": {
"__id__": 0 "__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
}, },
"fileId": "6b0OyE9BlBc67b0Z88Rr7S", "fileId": "6b0OyE9BlBc67b0Z88Rr7S",
"sync": false "sync": false
@ -303,11 +716,11 @@
"_level": 4, "_level": 4,
"_components": [ "_components": [
{ {
"__id__": 9 "__id__": 21
} }
], ],
"_prefab": { "_prefab": {
"__id__": 10 "__id__": 22
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -359,7 +772,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 8 "__id__": 20
}, },
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
@ -388,7 +801,7 @@
"__id__": 1 "__id__": 1
}, },
"asset": { "asset": {
"__id__": 0 "__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
}, },
"fileId": "4d0CHASPZNi7p94UTcOcq8", "fileId": "4d0CHASPZNi7p94UTcOcq8",
"sync": false "sync": false
@ -405,11 +818,14 @@
"_level": 4, "_level": 4,
"_components": [ "_components": [
{ {
"__id__": 12 "__id__": 24
},
{
"__id__": 25
} }
], ],
"_prefab": { "_prefab": {
"__id__": 13 "__id__": 26
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -461,7 +877,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 11 "__id__": 23
}, },
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
@ -484,13 +900,66 @@
"_atlas": null, "_atlas": null,
"_id": "" "_id": ""
}, },
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 23
},
"_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__": 23
},
"_id": ""
},
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
"__id__": 1 "__id__": 1
}, },
"asset": { "asset": {
"__id__": 0 "__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
}, },
"fileId": "28F99Sb39JOrxKwfkug7kB", "fileId": "28F99Sb39JOrxKwfkug7kB",
"sync": false "sync": false
@ -507,11 +976,14 @@
"_level": 4, "_level": 4,
"_components": [ "_components": [
{ {
"__id__": 15 "__id__": 28
},
{
"__id__": 29
} }
], ],
"_prefab": { "_prefab": {
"__id__": 16 "__id__": 30
}, },
"_opacity": 255, "_opacity": 255,
"_color": { "_color": {
@ -563,7 +1035,7 @@
"_name": "", "_name": "",
"_objFlags": 0, "_objFlags": 0,
"node": { "node": {
"__id__": 14 "__id__": 27
}, },
"_enabled": true, "_enabled": true,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
@ -586,13 +1058,66 @@
"_atlas": null, "_atlas": null,
"_id": "" "_id": ""
}, },
{
"__type__": "cc.Button",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 27
},
"_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__": 27
},
"_id": ""
},
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
"__id__": 1 "__id__": 1
}, },
"asset": { "asset": {
"__id__": 0 "__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
}, },
"fileId": "acIimo8epHUosNLytkMrGV", "fileId": "acIimo8epHUosNLytkMrGV",
"sync": false "sync": false
@ -604,7 +1129,7 @@
"node": { "node": {
"__id__": 1 "__id__": 1
}, },
"_enabled": true, "_enabled": false,
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_spriteFrame": { "_spriteFrame": {
@ -625,13 +1150,40 @@
"_atlas": null, "_atlas": null,
"_id": "" "_id": ""
}, },
{
"__type__": "9973bl/7yBCDIqpETVsYW8R",
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 1
},
"_enabled": true,
"leftBtn": {
"__id__": 27
},
"rightBtn": {
"__id__": 23
},
"currentNode": {
"__id__": 3
},
"leftNode": {
"__id__": 9
},
"rightNode": {
"__id__": 6
},
"currentIdx": 0,
"scrolling": false,
"_id": ""
},
{ {
"__type__": "cc.PrefabInfo", "__type__": "cc.PrefabInfo",
"root": { "root": {
"__id__": 1 "__id__": 1
}, },
"asset": { "asset": {
"__id__": 0 "__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
}, },
"fileId": "b7SeUaHURImKrOZOLyv6F1", "fileId": "b7SeUaHURImKrOZOLyv6F1",
"sync": false "sync": false

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 KiB

View File

@ -1,15 +1,15 @@
{ {
"ver": "2.2.0", "ver": "2.2.0",
"uuid": "59e8624e-acde-43d9-aba7-12a58c79b005", "uuid": "ddcf66d5-6dcf-4994-b89a-920eec08e816",
"type": "sprite", "type": "sprite",
"wrapMode": "clamp", "wrapMode": "clamp",
"filterMode": "bilinear", "filterMode": "bilinear",
"premultiplyAlpha": false, "premultiplyAlpha": false,
"subMetas": { "subMetas": {
"05": { "00": {
"ver": "1.0.3", "ver": "1.0.3",
"uuid": "b898b36a-9a09-4eae-9340-7d1a580be634", "uuid": "e1f38a35-059c-4c5b-a11e-70c0f6a60e4c",
"rawTextureUuid": "59e8624e-acde-43d9-aba7-12a58c79b005", "rawTextureUuid": "ddcf66d5-6dcf-4994-b89a-920eec08e816",
"trimType": "auto", "trimType": "auto",
"trimThreshold": 1, "trimThreshold": 1,
"rotated": false, "rotated": false,

Binary file not shown.

Before

Width:  |  Height:  |  Size: 346 KiB

After

Width:  |  Height:  |  Size: 364 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 364 KiB

After

Width:  |  Height:  |  Size: 375 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 375 KiB

After

Width:  |  Height:  |  Size: 355 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 355 KiB

After

Width:  |  Height:  |  Size: 357 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 357 KiB

View File

@ -0,0 +1,99 @@
cc.Class({
extends: cc.Component,
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:
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() {
},
// 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/part5/0' + 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, -561, 0);
var seq = cc.sequence(moveCurrent, moveFinish);
self.currentNode.runAction(seq);
self.rightNode.runAction(cc.moveTo(0.5, 0, 0));
self.leftNode.position = cc.v2(561, 0);
},
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(-561, 0);
let tmp = self.rightNode;
self.rightNode = self.currentNode;
self.currentNode = self.leftNode;
self.leftNode = tmp;
let url = 'textures/part5/0' + 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, 561, 0);
var seq = cc.sequence(moveCurrent, moveFinish);
self.currentNode.runAction(seq);
self.leftNode.runAction(cc.moveTo(0.5, 0, 0));
}
});

View File

@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "9973b97f-ef20-420c-8aa9-11356c616f11",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}