buttongroup切换的问题

solomanhl

再来问一个问题：
学习外卖案例，下方放了buttongoup，里面4个按钮，对应4个content。
好了，按钮用自带的icon模式，一切正常
用image模式，切换不同的content，下面的汉字当然是可以正常的变色，可是image要怎么样才能跟着变化呢？我做了2套图，配合下面的汉字，希望当前页面的图标就显示亮色的那个，  切换到别的页面就显示暗色。

沉江小鱼

同问

闰土

你想让图片变色？，好像CSS做不到吧，只能预备两张颜色不同，其他相同的图片，然后切换图片的路径来实现，控制image的src属性来实现你说的这个功能

solomanhl

闰土 发表于 2016-9-21 14:24
你想让图片变色？，好像CSS做不到吧，只能预备两张颜色不同，其他相同的图片，然后切换图片的路径来实现， ...

最终我在js里面实现了，激活页面设置一个图片，离开页面设置另一个图片

taoxiang

能不能附上代码啊

小萝卜

这里是我的代码 奉献一下
Model.prototype.indexActiveChanged = function(event){
                var contents = this.comp("index");
                var active = contents.getActiveIndex();
                var jxBtn = this.comp('jxBtn');
                var dyBtn = this.comp('dyBtn');
                var xxBtn = this.comp('xxBtn');
                var wdBtn = this.comp('wdBtn');
                if(active === 0){
                        jxBtn.set({
                                "icon" : "imgUI/poetry/img/jx1.svg|"
                        });

                        jxBtn.addClass("one");
                        jxBtn.removeClass("two");
                        dyBtn.set({
                                "icon" : "imgUI/poetry/img/dy.svg|"
                        });

                        dyBtn.addClass("two");
                        dyBtn.removeClass("one");
                        xxBtn.set({
                                "icon" : "imgUI/poetry/img/xx.svg|"
                        });
                        xxBtn.addClass("two");
                        xxBtn.removeClass("one");
                        wdBtn.set({
                                "icon" : "imgUI/poetry/img/wd.svg|"
                        });
                        wdBtn.addClass("two");
                        wdBtn.removeClass("one");
                }
                if(active === 1){
                        jxBtn.set({
                                "icon" : "imgUI/poetry/img/jx.svg|"
                        });
                        jxBtn.addClass("two");
                        jxBtn.removeClass("one");
                        dyBtn.set({
                                "icon" : "imgUI/poetry/img/dy1.svg|"
                        });
                        dyBtn.addClass("one");
                        dyBtn.removeClass("two");
                        xxBtn.set({
                                "icon" : "imgUI/poetry/img/xx.svg|"
                        });
                        xxBtn.addClass("two");
                        xxBtn.removeClass("one");
                        wdBtn.set({
                                "icon" : "imgUI/poetry/img/wd.svg|"
                        });
                        wdBtn.addClass("two");
                        wdBtn.removeClass("one");
                }
                if(active === 2){
                        console.log('3333');
                                jxBtn.set({
                                        "icon" : "imgUI/poetry/img/jx.svg|"
                                });
                        jxBtn.addClass("two");
                        jxBtn.removeClass("one");
                                dyBtn.set({
                                        "icon" : "imgUI/poetry/img/dy.svg|"
                                });
                                dyBtn.addClass("two");
                        dyBtn.removeClass("one");
                                xxBtn.set({
                                        "icon" : "imgUI/poetry/img/xx1.svg|"
                                });
                        xxBtn.addClass("one");
                        xxBtn.removeClass("two");
                        wdBtn.set({
                                "icon" : "imgUI/poetry/img/wd.svg|"
                        });
                        wdBtn.addClass("two");
                        wdBtn.removeClass("one");
                }
                if(active === 3){
                                jxBtn.set({
                                "icon" : "imgUI/poetry/img/jx.svg|"
                        });
                        jxBtn.addClass("two");
                        jxBtn.removeClass("one");
                                dyBtn.set({
                                "icon" : "imgUI/poetry/img/dy.svg|"
                        });
                        dyBtn.addClass("two");
                        dyBtn.removeClass("one");
                        xxBtn.set({
                                "icon" : "imgUI/poetry/img/xx.svg|"
                        });
                        xxBtn.addClass("two");
                        xxBtn.removeClass("one");
                                wdBtn.set({
                                "icon" : "imgUI/poetry/img/wd1.svg|"
                        });
                        wdBtn.addClass("one");
                        wdBtn.removeClass("two");
                }
               
        };

solomanhl

小萝卜 发表于 2016-10-19 10:54
这里是我的代码 奉献一下
Model.prototype.indexActiveChanged = function(event){
                var contents = this. ...

感谢，后来我也是用这个思路做的

小萝卜

solomanhl 发表于 2016-10-19 11:26
感谢，后来我也是用这个思路做的

那你左右切换的时候icon会变小么？我在切换的时候他总是闪一下 变小一下

solomanhl

小萝卜 发表于 2016-10-19 11:48
那你左右切换的时候icon会变小么？我在切换的时候他总是闪一下 变小一下

我的没有，我没你那么复杂，就是替换了图片，没切换css，图片的大小是一致的

小萝卜

已解决