下雨咯
下雨咯
  • 发布:2017-12-29 09:14
  • 更新:2017-12-29 21:13
  • 阅读:1629

请问webview方式创建的底部选项卡,如何更换tab图标?(tabicon)

分类:MUI

<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="tab-home.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label" style="color: #7C7C7C;">首页</span>
</a>
<a class="mui-tab-item" href="tab-message.html">
<span class="mui-icon mui-icon-email"><span id="muibadge" class="mui-badge">1</span></span>
<span class="mui-tab-label" style="color: #7C7C7C;">消息</span>
</a>
<a class="mui-tab-item" href="#">
<span class="mui-icon mui-icon-navigate"></span>
<span class="mui-tab-label" style="color: #7C7C7C;">通信录</span>
</a>
<a class="mui-tab-item" href="tab-me.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label" style="color: #7C7C7C;">我</span>
</a>

2017-12-29 09:14 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com

更换icon对应的class就可以

7***@qq.com

7***@qq.com

修改这句话中的class即可:

复制代码<span class="mui-icon mui-icon-mic"></span>

链接:MUI图标
自带模板:

复制代码<nav class="mui-bar mui-bar-tab">  
                <a class="mui-tab-item mui-active">  
                    <span class="mui-icon mui-icon-home"></span>  
                    <span class="mui-tab-label">首页</span>  
                </a>  
                <a class="mui-tab-item">  
                    <span class="mui-icon mui-icon-phone"></span>  
                    <span class="mui-tab-label">电话</span>  
                </a>  
                <a class="mui-tab-item">  
                    <span class="mui-icon mui-icon-email"></span>  
                    <span class="mui-tab-label">邮件</span>  
                </a>  
                <a class="mui-tab-item">  
                    <span class="mui-icon mui-icon-gear"></span>  
                    <span class="mui-tab-label">设置</span>  
                </a>  
            </nav>

修改后的例子:

复制代码
            <nav class="mui-bar mui-bar-tab">  
                <a class="mui-tab-item mui-active">  
                    <span class="mui-icon mui-icon-mic"></span>  
                    <span class="mui-tab-label">首页</span>  
                </a>  
                <a class="mui-tab-item">  
                    <span class="mui-icon mui-icon-location"></span>  
                    <span class="mui-tab-label">电话</span>  
                </a>  
                <a class="mui-tab-item">  
                    <span class="mui-icon mui-icon-starhalf"></span>  
                    <span class="mui-tab-label">邮件</span>  
                </a>  
                <a class="mui-tab-item">  
                    <span class="mui-icon mui-icon-list"></span>  
                    <span class="mui-tab-label">设置</span>  
                </a>  
            </nav>
[已删除]

[已删除]

联系我帮你解决

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容