增加按钮切换的事件
This commit is contained in:
cebgcontract
parent
61d282678d
commit
f3ce0c7006
@ -31,10 +31,13 @@
|
||||
},
|
||||
{
|
||||
"__id__": 7
|
||||
},
|
||||
{
|
||||
"__id__": 8
|
||||
}
|
||||
],
|
||||
"_prefab": {
|
||||
"__id__": 8
|
||||
"__id__": 10
|
||||
},
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
@ -273,6 +276,86 @@
|
||||
"_N$affectedByScale": false,
|
||||
"_id": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Button",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 1
|
||||
},
|
||||
"_enabled": true,
|
||||
"duration": 0.1,
|
||||
"zoomScale": 1.2,
|
||||
"clickEvents": [
|
||||
{
|
||||
"__id__": 9
|
||||
}
|
||||
],
|
||||
"_N$interactable": true,
|
||||
"_N$enableAutoGrayEffect": false,
|
||||
"_N$transition": 3,
|
||||
"transition": 3,
|
||||
"_N$normalColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 214,
|
||||
"g": 214,
|
||||
"b": 214,
|
||||
"a": 255
|
||||
},
|
||||
"_N$pressedColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 211,
|
||||
"g": 211,
|
||||
"b": 211,
|
||||
"a": 255
|
||||
},
|
||||
"pressedColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 211,
|
||||
"g": 211,
|
||||
"b": 211,
|
||||
"a": 255
|
||||
},
|
||||
"_N$hoverColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"hoverColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"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": null,
|
||||
"_id": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.ClickEvent",
|
||||
"target": {
|
||||
"__id__": 1
|
||||
},
|
||||
"component": "",
|
||||
"_componentId": "7b631hG5VxEu6deSSqBp4B1",
|
||||
"handler": "onClick",
|
||||
"customEventData": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.PrefabInfo",
|
||||
"root": {
|
||||
|
||||
334
assets/comp/wallet/prefab/tabBtn.prefab
Normal file
334
assets/comp/wallet/prefab/tabBtn.prefab
Normal file
@ -0,0 +1,334 @@
|
||||
[
|
||||
{
|
||||
"__type__": "cc.Prefab",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"_native": "",
|
||||
"data": {
|
||||
"__id__": 1
|
||||
},
|
||||
"optimizationPolicy": 0,
|
||||
"asyncLoadAssets": false
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "tabBtn",
|
||||
"_objFlags": 0,
|
||||
"_parent": null,
|
||||
"_children": [
|
||||
{
|
||||
"__id__": 2
|
||||
}
|
||||
],
|
||||
"_active": true,
|
||||
"_level": 1,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 5
|
||||
},
|
||||
{
|
||||
"__id__": 6
|
||||
},
|
||||
{
|
||||
"__id__": 7
|
||||
}
|
||||
],
|
||||
"_prefab": {
|
||||
"__id__": 9
|
||||
},
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 153,
|
||||
"g": 153,
|
||||
"b": 153,
|
||||
"a": 255
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 40,
|
||||
"height": 80
|
||||
},
|
||||
"_anchorPoint": {
|
||||
"__type__": "cc.Vec2",
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
},
|
||||
"_position": {
|
||||
"__type__": "cc.Vec3",
|
||||
"x": 0,
|
||||
"y": 110,
|
||||
"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,
|
||||
"groupIndex": 0,
|
||||
"_id": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Node",
|
||||
"_name": "New Label",
|
||||
"_objFlags": 0,
|
||||
"_parent": {
|
||||
"__id__": 1
|
||||
},
|
||||
"_children": [],
|
||||
"_active": true,
|
||||
"_level": 4,
|
||||
"_components": [
|
||||
{
|
||||
"__id__": 3
|
||||
}
|
||||
],
|
||||
"_prefab": {
|
||||
"__id__": 4
|
||||
},
|
||||
"_opacity": 255,
|
||||
"_color": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 153,
|
||||
"g": 153,
|
||||
"b": 153,
|
||||
"a": 255
|
||||
},
|
||||
"_contentSize": {
|
||||
"__type__": "cc.Size",
|
||||
"width": 63.37,
|
||||
"height": 40
|
||||
},
|
||||
"_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": 90,
|
||||
"_rotationY": 90,
|
||||
"_quat": {
|
||||
"__type__": "cc.Quat",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"z": -0.7071067811865475,
|
||||
"w": 0.7071067811865476
|
||||
},
|
||||
"_skewX": 0,
|
||||
"_skewY": 0,
|
||||
"groupIndex": 0,
|
||||
"_id": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Label",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 2
|
||||
},
|
||||
"_enabled": true,
|
||||
"_useOriginalSize": false,
|
||||
"_string": "Tokens",
|
||||
"_N$string": "Tokens",
|
||||
"_fontSize": 20,
|
||||
"_lineHeight": 40,
|
||||
"_enableWrapText": true,
|
||||
"_N$file": null,
|
||||
"_isSystemFontUsed": true,
|
||||
"_spacingX": 0,
|
||||
"_batchAsBitmap": false,
|
||||
"_N$horizontalAlign": 1,
|
||||
"_N$verticalAlign": 1,
|
||||
"_N$fontFamily": "Arial",
|
||||
"_N$overflow": 0,
|
||||
"_N$cacheMode": 0,
|
||||
"_id": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.PrefabInfo",
|
||||
"root": {
|
||||
"__id__": 1
|
||||
},
|
||||
"asset": {
|
||||
"__uuid__": "907f9b53-1333-4900-b166-4ba7a7b6e09f"
|
||||
},
|
||||
"fileId": "0eFiIBpkxFprj9q+ngUQWf",
|
||||
"sync": false
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Sprite",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 1
|
||||
},
|
||||
"_enabled": true,
|
||||
"_srcBlendFactor": 770,
|
||||
"_dstBlendFactor": 771,
|
||||
"_spriteFrame": {
|
||||
"__uuid__": "13d3eb87-b218-4fb7-b7c2-31e8a58b67bc"
|
||||
},
|
||||
"_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__": "7b631hG5VxEu6deSSqBp4B1",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 1
|
||||
},
|
||||
"_enabled": true,
|
||||
"titleLabel": {
|
||||
"__id__": 3
|
||||
},
|
||||
"border": {
|
||||
"__id__": 1
|
||||
},
|
||||
"title": "",
|
||||
"selected": false,
|
||||
"colors": [
|
||||
{
|
||||
"__type__": "cc.Color",
|
||||
"r": 127,
|
||||
"g": 127,
|
||||
"b": 127,
|
||||
"a": 255
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Color",
|
||||
"r": 0,
|
||||
"g": 255,
|
||||
"b": 0,
|
||||
"a": 255
|
||||
}
|
||||
],
|
||||
"_id": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.Button",
|
||||
"_name": "",
|
||||
"_objFlags": 0,
|
||||
"node": {
|
||||
"__id__": 1
|
||||
},
|
||||
"_enabled": true,
|
||||
"duration": 0.1,
|
||||
"zoomScale": 1.2,
|
||||
"clickEvents": [
|
||||
{
|
||||
"__id__": 8
|
||||
}
|
||||
],
|
||||
"_N$interactable": true,
|
||||
"_N$enableAutoGrayEffect": false,
|
||||
"_N$transition": 3,
|
||||
"transition": 3,
|
||||
"_N$normalColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 214,
|
||||
"g": 214,
|
||||
"b": 214,
|
||||
"a": 255
|
||||
},
|
||||
"_N$pressedColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 211,
|
||||
"g": 211,
|
||||
"b": 211,
|
||||
"a": 255
|
||||
},
|
||||
"pressedColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 211,
|
||||
"g": 211,
|
||||
"b": 211,
|
||||
"a": 255
|
||||
},
|
||||
"_N$hoverColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"a": 255
|
||||
},
|
||||
"hoverColor": {
|
||||
"__type__": "cc.Color",
|
||||
"r": 255,
|
||||
"g": 255,
|
||||
"b": 255,
|
||||
"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": null,
|
||||
"_id": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.ClickEvent",
|
||||
"target": {
|
||||
"__id__": 1
|
||||
},
|
||||
"component": "",
|
||||
"_componentId": "7b631hG5VxEu6deSSqBp4B1",
|
||||
"handler": "onClick",
|
||||
"customEventData": ""
|
||||
},
|
||||
{
|
||||
"__type__": "cc.PrefabInfo",
|
||||
"root": {
|
||||
"__id__": 1
|
||||
},
|
||||
"asset": {
|
||||
"__uuid__": "907f9b53-1333-4900-b166-4ba7a7b6e09f"
|
||||
},
|
||||
"fileId": "d9Su+XfHhMuaIxSt7nzqdk",
|
||||
"sync": false
|
||||
}
|
||||
]
|
||||
7
assets/comp/wallet/prefab/tabBtn.prefab.meta
Normal file
7
assets/comp/wallet/prefab/tabBtn.prefab.meta
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"ver": "1.0.1",
|
||||
"uuid": "907f9b53-1333-4900-b166-4ba7a7b6e09f",
|
||||
"optimizationPolicy": "AUTO",
|
||||
"asyncLoadAssets": false,
|
||||
"subMetas": {}
|
||||
}
|
||||
@ -2,7 +2,8 @@ import { singleton } from "./decorator/singleton.decorator";
|
||||
import Web3 = require('./lib/web3.min');
|
||||
import sth = require("./lib/ethSigUtil");
|
||||
import { ZError } from "./common/ZError";
|
||||
import { AllChains } from './data/allchain';
|
||||
import { AllChains } from "./data/allchain";
|
||||
|
||||
|
||||
export interface IChainData {
|
||||
name: string,
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
const {ccclass, property} = cc._decorator;
|
||||
import TextBtn from "./TextBtn";
|
||||
import TextBtn, { TEXTBTN_CLICKED } from "./TextBtn";
|
||||
import WalletBase from "./WallerBase";
|
||||
|
||||
export const BTN_SELECT_INDEX_CHANGE = 'btn_select_index_change'
|
||||
|
||||
@ccclass
|
||||
export default class ButtonGroup extends WalletBase {
|
||||
@property({
|
||||
@ -18,4 +20,25 @@ export default class ButtonGroup extends WalletBase {
|
||||
}
|
||||
|
||||
// update (dt) {}
|
||||
resetBtns() {
|
||||
for (let btn of this.btns) {
|
||||
btn.node.off(TEXTBTN_CLICKED);
|
||||
}
|
||||
this.btns.length = 0
|
||||
this.node.removeAllChildren()
|
||||
}
|
||||
|
||||
addBtn(btn: TextBtn) {
|
||||
this.btns.push(btn);
|
||||
btn.node.on(TEXTBTN_CLICKED, this.onChildBtnClicked.bind(this))
|
||||
this.node.addChild(btn.node);
|
||||
}
|
||||
|
||||
onChildBtnClicked(data: {index: number}) {
|
||||
console.log(`textbtn clicked: ${JSON.stringify(data)}`)
|
||||
for (let btn of this.btns) {
|
||||
btn.selected = btn.index === data.index
|
||||
}
|
||||
this.node.emit(BTN_SELECT_INDEX_CHANGE, data)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import JCWallet from "../JCWallet";
|
||||
import ButtonGroup from "./ButtonGroup";
|
||||
import ButtonGroup, { BTN_SELECT_INDEX_CHANGE } from "./ButtonGroup";
|
||||
import TextBtn from "./TextBtn";
|
||||
|
||||
const {ccclass, property} = cc._decorator;
|
||||
@ -23,9 +23,15 @@ export default class ChainTab extends cc.Component {
|
||||
|
||||
start () {
|
||||
this.wallet = new JCWallet()
|
||||
this.btnGroup.node.on(BTN_SELECT_INDEX_CHANGE,
|
||||
this.onChainSelectChange)
|
||||
this.updateChains()
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
this.btnGroup.node.off(BTN_SELECT_INDEX_CHANGE)
|
||||
}
|
||||
|
||||
// update (dt) {}
|
||||
|
||||
updateChains() {
|
||||
@ -34,12 +40,18 @@ export default class ChainTab extends cc.Component {
|
||||
return;
|
||||
}
|
||||
this.node.removeAllChildren()
|
||||
let i = 0;
|
||||
for (const chain of chains) {
|
||||
const btn = cc.instantiate(this.btnPreb)
|
||||
const btnM: TextBtn = btn.getComponent(TextBtn)
|
||||
this.node.addChild(btn)
|
||||
this.btnGroup.addBtn(btnM);
|
||||
btnM.title = chain.name
|
||||
btnM.index = i ++
|
||||
btnM.selected = this.wallet.currentChain.id === chain.id
|
||||
}
|
||||
}
|
||||
|
||||
onChainSelectChange(data: {index: number}) {
|
||||
console.log('on chain change: ', JSON.stringify(data))
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import WalletBase from "./WallerBase";
|
||||
|
||||
const {ccclass, property} = cc._decorator;
|
||||
|
||||
export const TEXTBTN_CLICKED = 'textbtn_clicked'
|
||||
@ccclass
|
||||
export default class TextBtn extends WalletBase {
|
||||
|
||||
@ -21,6 +22,8 @@ export default class TextBtn extends WalletBase {
|
||||
@property
|
||||
selected: boolean = false;
|
||||
|
||||
index: number = 0
|
||||
|
||||
@property({
|
||||
type: [cc.Color]
|
||||
})
|
||||
@ -41,4 +44,8 @@ export default class TextBtn extends WalletBase {
|
||||
this.titleLabel.node.color = color
|
||||
this.border.color = color
|
||||
}
|
||||
|
||||
onClick() {
|
||||
this.node.emit(TEXTBTN_CLICKED, {index: this.index})
|
||||
}
|
||||
}
|
||||
|
||||
53
assets/comp/wallet/scripts/ui/TokenTab.ts
Normal file
53
assets/comp/wallet/scripts/ui/TokenTab.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import JCWallet from "../JCWallet";
|
||||
import ButtonGroup, { BTN_SELECT_INDEX_CHANGE } from "./ButtonGroup";
|
||||
import TextBtn from "./TextBtn";
|
||||
|
||||
const {ccclass, property} = cc._decorator;
|
||||
|
||||
@ccclass
|
||||
export default class TokenTab extends cc.Component {
|
||||
private wallet: JCWallet
|
||||
|
||||
@property({
|
||||
type: ButtonGroup
|
||||
})
|
||||
btnGroup: ButtonGroup = null
|
||||
|
||||
@property({
|
||||
type: cc.Prefab
|
||||
})
|
||||
btnPreb: cc.Prefab = null
|
||||
// LIFE-CYCLE CALLBACKS:
|
||||
|
||||
// onLoad () {}
|
||||
private titles = ['Tokens', 'Hero', 'Weapon', 'Chip']
|
||||
|
||||
start () {
|
||||
this.wallet = new JCWallet()
|
||||
this.btnGroup.resetBtns()
|
||||
this.btnGroup.node.on(BTN_SELECT_INDEX_CHANGE,
|
||||
this.onTokenTypeChange.bind(this))
|
||||
this.showAllBtn();
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
this.btnGroup.node.off(BTN_SELECT_INDEX_CHANGE)
|
||||
}
|
||||
|
||||
// update (dt) {}
|
||||
showAllBtn() {
|
||||
console.log('show all token tab')
|
||||
for (let i = 0, l = this.titles.length; i < l; i++) {
|
||||
const btn = cc.instantiate(this.btnPreb)
|
||||
const btnM: TextBtn = btn.getComponent(TextBtn)
|
||||
this.btnGroup.addBtn(btnM);
|
||||
btnM.title = this.titles[i]
|
||||
btnM.index = i
|
||||
btnM.selected = i === 0
|
||||
}
|
||||
}
|
||||
|
||||
onTokenTypeChange(data: {index: number}) {
|
||||
console.log('on token change: ', JSON.stringify(data))
|
||||
}
|
||||
}
|
||||
9
assets/comp/wallet/scripts/ui/TokenTab.ts.meta
Normal file
9
assets/comp/wallet/scripts/ui/TokenTab.ts.meta
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"ver": "1.0.5",
|
||||
"uuid": "1509d53c-4897-4e44-b6b6-3557947e4017",
|
||||
"isPlugin": false,
|
||||
"loadPluginInWeb": true,
|
||||
"loadPluginInNative": true,
|
||||
"loadPluginInEditor": false,
|
||||
"subMetas": {}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user