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底部导航官网也有自带得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]