增加底部轮播图

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__": 5
},
{
"__id__": 8
},
{
"__id__": 11
},
{
"__id__": 14
},
{
"__id__": 17
},
{
"__id__": 20
},
{
"__id__": 23
},
{
"__id__": 27
}
],
"_active": true,
"_level": 3,
"_level": 1,
"_components": [
{
"__id__": 17
"__id__": 31
},
{
"__id__": 32
}
],
"_prefab": {
"__id__": 18
"__id__": 33
},
"_opacity": 255,
"_color": {
@ -89,21 +95,94 @@
},
{
"__type__": "cc.Node",
"_name": "01",
"_name": "img_view",
"_objFlags": 0,
"_parent": {
"__id__": 1
},
"_children": [],
"_active": true,
"_level": 4,
"_components": [
"_children": [
{
"__id__": 3
},
{
"__id__": 6
},
{
"__id__": 9
}
],
"_active": true,
"_level": 2,
"_components": [
{
"__id__": 12
}
],
"_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
}
],
"_prefab": {
"__id__": 5
},
"_opacity": 255,
"_color": {
@ -155,8 +234,110 @@
"_name": "",
"_objFlags": 0,
"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
},
"_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,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
@ -184,9 +365,241 @@
"__id__": 1
},
"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
},
{
@ -201,11 +614,11 @@
"_level": 4,
"_components": [
{
"__id__": 6
"__id__": 18
}
],
"_prefab": {
"__id__": 7
"__id__": 19
},
"_opacity": 255,
"_color": {
@ -257,7 +670,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 5
"__id__": 17
},
"_enabled": true,
"_srcBlendFactor": 770,
@ -286,7 +699,7 @@
"__id__": 1
},
"asset": {
"__id__": 0
"__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "6b0OyE9BlBc67b0Z88Rr7S",
"sync": false
@ -303,11 +716,11 @@
"_level": 4,
"_components": [
{
"__id__": 9
"__id__": 21
}
],
"_prefab": {
"__id__": 10
"__id__": 22
},
"_opacity": 255,
"_color": {
@ -359,7 +772,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 8
"__id__": 20
},
"_enabled": true,
"_srcBlendFactor": 770,
@ -388,7 +801,7 @@
"__id__": 1
},
"asset": {
"__id__": 0
"__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "4d0CHASPZNi7p94UTcOcq8",
"sync": false
@ -405,11 +818,14 @@
"_level": 4,
"_components": [
{
"__id__": 12
"__id__": 24
},
{
"__id__": 25
}
],
"_prefab": {
"__id__": 13
"__id__": 26
},
"_opacity": 255,
"_color": {
@ -461,7 +877,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 11
"__id__": 23
},
"_enabled": true,
"_srcBlendFactor": 770,
@ -484,13 +900,66 @@
"_atlas": null,
"_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",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
"__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "28F99Sb39JOrxKwfkug7kB",
"sync": false
@ -507,11 +976,14 @@
"_level": 4,
"_components": [
{
"__id__": 15
"__id__": 28
},
{
"__id__": 29
}
],
"_prefab": {
"__id__": 16
"__id__": 30
},
"_opacity": 255,
"_color": {
@ -563,7 +1035,7 @@
"_name": "",
"_objFlags": 0,
"node": {
"__id__": 14
"__id__": 27
},
"_enabled": true,
"_srcBlendFactor": 770,
@ -586,13 +1058,66 @@
"_atlas": null,
"_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",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
"__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "acIimo8epHUosNLytkMrGV",
"sync": false
@ -604,7 +1129,7 @@
"node": {
"__id__": 1
},
"_enabled": true,
"_enabled": false,
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
@ -625,13 +1150,40 @@
"_atlas": null,
"_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",
"root": {
"__id__": 1
},
"asset": {
"__id__": 0
"__uuid__": "3a16dea4-42b2-4bc5-9909-310eb295a6f5"
},
"fileId": "b7SeUaHURImKrOZOLyv6F1",
"sync": false

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 KiB

View File

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