首页 » MUI » MUI底部导航替换图片 底部导航实现点击更换图片

MUI底部导航替换图片 底部导航实现点击更换图片

 

2018.11.12 20:12 更新:
对于下午的教程有了一个新的更新,就是直接去改动span标签的背景,下午测试中一直失败是因为上下级的问题
更新后代码如下:mying类直接写在里面
<a class="mui-tab-item " href="tab-webview-subpage-setting.html">
<span class="mui-icon myimg"></span>
<span class="mui-tab-label">关于 </span>
</a>

更新后的css样式

.myimg{background-image: url(../images/my.png);background-size:100%;}
.mui-bar-tab .mui-tab-item.mui-active .myimg{background-image: url(../images/my-active.png);background-size:100%;}

我们先看下图片对比

MUI底部导航替换图片 底部导航实现点击更换图片

MUI底部导航官网也有自带得ICON选择,也可以使用阿里图标进行替换
但是在无论怎么替换我们在点击后颜色都是蓝色的,可以修改颜色代码 但是都是单色的!
之前也有方式去修改点击后直接替换图片:页面底部固定文字图片选项卡,怎么实现点击更换图片

但是很复杂,是一个繁琐的过程

博客推选:MUI底部导航替换图片

2行css样式搞定

 

当然也有一点小不足 枫瑞是直接控制A标签下背景图片,而MUI官方是由span标签控制
MUI官方 样式如下:

<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-chatbubble"></span>
<span class="mui-tab-label">我的</span>
</a>

修改后如下:

<a class="mui-tab-item myimg" href="#tabbar-with-map">
<span class="mui-icon "></span>
<span class="mui-tab-label">我的</span>
</a>

删除了原有的 mui-icon-chatbubble类 在a标签中新加myimg

在页面head中添加以下样式:

.myimg{
background-image: url(imgs/my1.png);
background-size:20% ;
background-repeat:no-repeat;
background-position: top;
}

.myimg.mui-active{
background-image: url(imgs/my2.png);
background-size:20% ;
background-repeat:no-repeat;
background-position: top;
}

原理很简单只是但我们选择到 我的 的时候 替换了a标签的背景 达到了 MUI底部导航实现点击更换图片 的效果

感谢 @落影随风 前辈指点
相关图片和源码点击Get it下载:[reply2down]https://pan.baidu.com/s/1ciWnSRz-M5fZASnSf5whfg[/reply2down]

 

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《MUI底部导航替换图片 底部导航实现点击更换图片》 发布于2018-11-12

赞(0) 生成海报

评论 7

8 + 4 =
  1. #0

    牛逼

    小胖2年前 (2018-11-16)
  2. #0

    666枫瑞

    2年前 (2018-11-13)
  3. #0

    1.累世情缘,谁捡起,谁抛下,谁忘前尘,谁总牵挂。忆当时年华,谁点相思,谁种桃花。
    2.白浅,你生来仙胎,不用修行便是神女。可四海八荒哪有这么便宜的事情,不历这一番天劫,你又怎么飞升得了上神。
    3.她不知道,诛仙台诛的只是神仙的修为,凡人跳下诛仙台,却是灰飞烟灭。
    4.她一饮而尽,这世间再没俊疾山上的素素,那不过是青丘之国白止帝君的幺女白浅上神做的一场梦,带着无尽苦楚和微微桃花色。梦中如何,梦醒之后,便忘干净。 :oops:

    IG牛逼2年前 (2018-11-13)
  4. #0

    那一世,大荒之中一处荒山,成就她与他的初见。
    桃花灼灼,枝叶蓁蓁,妖娆伤眼。
    记忆可以封存,可心有时也会背叛,忘得了前世情缘,忘不了桃林十里,亦忘不了十里桃林中玄衣的少年。
    这一世,东海水晶宫,他们不期而遇。
    不是每个人都能看透这三生三世的爱恨交织,只要你还在,只要我还爱,那么,这世间,刀山火海,毫不畏惧。
    有些爱,藏在嘴边,挂在心尖。 浮生若梦,情如流水,爱似桃花…… :mrgreen:

    IG牛逼2年前 (2018-11-13)
  5. #0

    “你若敢死,我立刻便去找折颜要药水,把你忘得干干净净”
    他的身子一颤,半晌,扯出一个笑来,他说:“那样也好。”
    他在这世上,留给我的最后一句话是,那样也好。
    你有没有爱过一个人?你有没有恨过一个人?
    三百年前,诛仙台上的她绝然转身跳下,让铜镜那边的他亲眼见她隔世永别。
    这世间再没一个凡尘女子素素,九重天上的太子夜华,不过是白浅上神做的一场梦,带着无尽苦楚和微微桃花色。 :arrow:

    IG牛逼2年前 (2018-11-13)
  6. #0

    远古众神凋零,现今只存了龙族、凤族、九尾白狐。狐帝白止膝下得了四个儿子一个女儿。这唯一的一个女儿长得颇好,却是个炮灰命。活到十四万岁,共遇得五朵桃花。
    一朵碍于异族不能通婚,那思慕尚处于萌芽期,便被该桃花的爹娘终结了。
    一朵误以为她是个男儿身,纠结于这段断袖情,待出现个跟她长得相似的女子,立刻便跟着人跑了。
    一朵是他爹娘亲自做主给她定的亲,待到他们家走一趟,却看上了她的婢女,两人私奔了。
    一朵在心底里暗恋她暗恋了万儿八千年不敢表白,待鼓起勇气来表白时,她前未婚夫的爹娘为了补偿她,又与她重新结了一门亲。
    前头四朵桃花有三朵都是烂桃花,唯一算得上好的一朵,却又是个才打骨苞儿的。
    这五朵桃花中的最后一朵,是她命中注定的夫君,九重天上的太子夜华。恩怨纠葛如浮云过,她遗憾没在最好的年华里遇上他。 :cry:

    IG牛逼2年前 (2018-11-13)
  7. #0

    ojbk 妹子不错哈 :oops:

    ig牛逼2年前 (2018-11-13)

长按图片转发给朋友

微信 QQ双端发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....