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

fengrui99

文章来源网站 ：https://www.frbkw.com/1208/


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官方 样式如下：
<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底部导航实现点击更换图片 的效果感谢 @落影随风 前辈指点

相关图片和源码下载：百度网盘

sushangyu

哥，我这边有个需求是上传大文件视频，但是该框架好像不能上传超过100M的文件，超过即奔溃，你们又解决过吗

fengrui99

sushangyu 发表于 2018-11-16 13:25
哥，我这边有个需求是上传大文件视频，但是该框架好像不能上传超过100M的文件，超过即奔溃，你们又解决过吗

不会啊 我也是新手