微信小程序--多个按钮选中的联动效果

场景：画图应用需选择画笔颜色，有4种颜色按钮可供选择，用户点击任意按钮进行颜色切换。

思路：通过curColorIndex变量保存当前选中的颜色下标，选中后添加额外的选中样式

一，canvas.wxss文件：这个文件用于定义按钮正常态和选中态的样式，以及Flex

布局的约束

二，canvas.wxml文件：这个文件是Demo的布局界面，通过使用js的data数据和wxss的class样式进行页面布局

这里通过wx：for实现循环打印颜色数组，通过curColorIndex值控制选中的样式，index值进行参数传递

三，canvas.js文件：提供数据，以及处理xwml的控件响应，并通过设置this.setData的值来更新xwml的显示

原文地址： http://www.jianshu.com/p/657e3b2a8aa4 http://www.jianshu.com/p/657e3b2a8aa4

cocos js 做出按钮选中效果示例：

一，首先使用cocos新建一个Cocos2d-js的新项目，然后再cocostudio中创建一个场景，在场景中添加三个按钮分别设置三态的图片

二，打开编辑器，实现代码如下：

var HelloWorldLayer = cc.Layer.extend({

ctor:function () {

this._super()

//导入cocostudio中拼好的界面

mainscene = ccs.load(res.MainScene_json).node

this.addChild(mainscene)

this.teamButton = ccui.helper.seekWidgetByName(mainscene,"Button_0")

var btn2 = ccui.helper.seekWidgetByName(mainscene,"Button_1")

var btn3 = ccui.helper.seekWidgetByName(mainscene,"Button_2")

//先默认设置一个按钮为选中状态   this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT)

this.teamButton.setEnabled(false)

var teamInfo = this.teamButton

this.teamButton.addTouchEventListener(this.selectedBtn1,this)

btn2.addTouchEventListener(this.selectedBtn2,this)

btn3.addTouchEventListener(this.selectedBtn3,this)

return true

},

selectedBtn1: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========商店界面")

}

},

selectedBtn2: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========卡牌界面")

}

},

selectedBtn3: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========战斗界面")

}

},

callBack: function (sender) {

if (this.teamButton == sender){

return

}else{

this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_NORMAL)

this.teamButton.setEnabled(true)

sender.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT)

sender.setEnabled(false)

this.teamButton = sender

}

},

})

var HelloWorldScene = cc.Scene.extend({

onEnter:function () {

this._super()

var layer = new HelloWorldLayer()

this.addChild(layer)

}

})

三，运行就可以查看界面，点击不同的按钮显示不同的输出结果

[Log] ==========商店界面 (CCDebugger.js, line 331)

[Log] ==========卡牌界面 (CCDebugger.js, line 331)

[Log] ==========战斗界面 (CCDebugger.js, line 331)

---