MUI底部导航栏+页面切换+iconfont阿里巴巴矢量图标库使用技巧的实现

本文主要是介绍MUI底部导航栏+页面切换+iconfont阿里巴巴矢量图标库使用技巧的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

不多废话了直接上具体步骤和代码解释:

在你的页面里引入mui的css和js文件:

		<script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet" />

HTML代码:

<nav class="mui-bar mui-bar-tab"><a id="display" class="mui-tab-item " style="touch-action: none;" href="html/Home/Home.html"><span class="mui-icon"><svg t="1611804915551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31730"width="23" height="23"><path d="M552.494545 245.666909a57.809455 57.809455 0 0 0-81.361454 0l-228.864 227.421091c8.471273 16.384 23.598545 28.811636 41.844364 33.792l216.296727-214.109091a40.401455 40.401455 0 0 1 4.002909-3.490909c2.606545-2.327273 5.12-3.258182 7.633454-3.165091 2.466909-0.093091 4.980364 0.884364 7.58691 3.165091a39.749818 39.749818 0 0 1 3.956363 3.490909l216.389818 214.109091c18.152727-4.887273 33.186909-17.221818 41.751273-33.419636L552.494545 245.666909z m141.73091 263.354182l-174.126546-185.250909c-0.139636-0.139636-3.397818-3.816727-8.005818-3.816727-5.445818 0-8.005818 3.677091-8.145455 3.816727l-174.126545 185.250909h0.325818l-14.103273 15.034182v204.474182s16.058182 0.372364 35.84 0.372363h90.158546a40.448 40.448 0 0 1-0.139637-3.211636v-136.378182c0-19.735273 14.661818-35.653818 32.814546-35.653818h75.776c18.152727 0 32.814545 15.918545 32.814545 35.607273v136.424727a37.236364 37.236364 0 0 1-0.139636 3.211636h88.901818c19.828364 0 35.886545-0.372364 35.886546-0.372363v-204.474182l-14.103273-15.034182h0.372364zM512 0c282.717091 0 512 229.236364 512 512s-229.282909 512-512 512S0 794.763636 0 512 229.282909 0 512 0z"fill="#b64d51" p-id="31731"></path></svg></span><span class="mui-tab-label">首页</span></a><a class="mui-tab-item" style="touch-action: none;" href="html/Service/service.html"><span class="mui-icon"><svg t="1611804678412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13022"width="23" height="23"><path d="M0 512.512C0 229.997714 229.010286 0.987429 511.488 0.987429c282.514286 0 511.524571 229.010286 511.524571 511.524571C1023.012571 794.989714 793.965714 1024 511.488 1024 229.010286 1024 0 794.989714 0 512.512z m695.222857-217.417143a147.492571 147.492571 0 0 0-150.052571 21.76l-166.656 166.656a18.322286 18.322286 0 0 1-25.6-25.6l133.010285-133.376a145.773714 145.773714 0 0 0-158.573714-29.44c-64.768 27.721143-200.338286 157.732571-36.205714 318.427429 164.096 160.694857 215.222857 206.299429 215.222857 206.299428l5.12 5.558857 5.12-5.558857s51.565714-45.604571 215.259429-206.299428 28.562286-290.706286-36.644572-318.427429z"fill="#b64d51" p-id="13023"></path></svg></span><span class="mui-tab-label">我的服务</span></a><a class="mui-tab-item" style="touch-action: none;" href="html/ContactUs/contactus.html"><span class="mui-icon"><svg t="1611805119115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40756"width="23" height="23"><path d="M512 0c282.763636 0 512 229.236364 512 512s-229.236364 512-512 512S0 794.763636 0 512 229.236364 0 512 0z m-31.650909 315.717818a4809.076364 4809.076364 0 0 0-83.502546-137.960727c-11.962182-17.640727-26.018909-10.938182-35.281454-4.654546-5.399273 2.792727-20.573091 14.242909-36.770909 26.391273l101.376 170.216727c16.989091-9.774545 30.859636-18.478545 44.544-26.577454 13.591273-8.098909 12.939636-21.736727 9.634909-27.461818z m258.141091 474.484364c16.942545-9.681455 19.362909-21.550545 8.704-38.353455-18.432-29.090909-35.234909-59.112727-53.061818-88.622545-33.186909-54.923636-23.970909-65.489455-93.789091-18.804364-0.651636 0.465455-0.837818 1.442909-2.792728 4.840727l98.676364 165.701819c15.778909-9.309091 28.951273-17.175273 42.263273-24.762182z m-463.034182-417.047273c27.461818 144.570182 99.374545 265.448727 200.238545 370.082909 38.306909 39.656727 83.781818 70.004364 139.264 80.058182 18.944 3.397818 39.051636 0.558545 64.698182 0.558545-35.421091-59.671273-66.001455-111.569455-97.28-163.048727-2.420364-3.956364-9.541818-5.073455-14.429091-7.68-13.218909-6.888727-31.511273-10.519273-38.725818-21.364363a4277.573818 4277.573818 0 0 1-116.084363-186.042182c-6.888727-11.543273-11.636364-31.930182-6.05091-41.704728 12.427636-21.597091 2.327273-35.281455-7.540363-51.2-10.007273-16.197818-19.502545-32.581818-29.230546-48.919272L314.693818 210.757818c-8.331636 11.357091-13.917091 18.990545-18.990545 26.530909-10.798545 16.104727-23.365818 39.703273-25.041455 67.165091-1.256727 12.148364 1.349818 50.408727 4.794182 68.701091z"fill="#b64d51" p-id="40757"></path></svg></span><span class="mui-tab-label">联系我们</span></a><a id="home" class="mui-tab-item " style="touch-action: none;" href="html/AboutUs/aboutus.html"><span class="mui-icon"><svg t="1611805295905" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="47483" width="23" height="23"><path d="M511.791672 1024C794.284009 1024 1023.861115 794.284009 1023.861115 512.069443c0-282.353452-229.715991-511.930557-511.930558-511.930558-282.214567-0.138885-511.930557 229.577106-511.930557 511.930558 0 282.214567 229.577106 511.930557 511.791672 511.930557" fill="#b64d51" p-id="47484" data-spm-anchor-id="a313x.7781069.0.i74" class="selected"></path><path d="M767.201411 707.064153c-7.916452 0-14.444053-6.527601-14.444053-14.444053s6.527601-14.444053 14.444053-14.444052c6.527601 0 10.138614-3.888783 11.66635-6.110946 2.916588-4.027669 3.472128-9.166418 1.805506-13.888512-19.443917-54.304082-63.748271-97.497355-118.607893-115.413536-7.638682-2.499932-11.66635-10.555269-9.305303-18.193951s10.555269-11.66635 18.19395-9.305303c31.249152 10.277499 60.137258 27.777024 83.747729 50.831955 23.610471 22.916045 41.943307 51.52638 52.915231 82.358877 4.860979 13.610742 2.777702 28.610335-5.41652 40.276685-7.916452 11.527465-20.693883 18.332836-34.99905 18.332836z" fill="#FFFFFF" p-id="47485"></path><path d="M657.759935 545.124101c-5.138749 0-9.999729-2.638817-12.638546-7.499796-3.888783-6.944256-1.249966-15.694019 5.69429-19.582802 35.554591-19.582802 57.637325-56.9429 57.637325-97.497355 0-54.026312-38.471179-99.997287-91.525295-109.441476-7.916452-1.388851-13.055201-8.888648-11.66635-16.8051s8.888648-13.055201 16.8051-11.66635c31.943578 5.69429 61.248339 22.49939 82.219992 47.359826 21.388309 25.138207 33.193544 57.359555 33.193544 90.414214 0 50.97084-27.777024 98.052896-72.498034 122.635563-2.499932 1.388851-4.860979 2.083277-7.222026 2.083276z m-16.666215 197.911298c-7.916452 0-14.444053-6.527601-14.444052-14.444052s6.527601-14.444053 14.444052-14.444053c6.527601 0 12.360776-3.055473 16.110674-8.333107 3.888783-5.555405 4.860979-12.499661 2.499933-19.027262-23.3327-65.137122-76.525702-116.802387-142.218365-138.468466-7.638682-2.499932-11.66635-10.555269-9.305303-18.193951 2.499932-7.638682 10.555269-11.66635 18.193951-9.305303 36.526787 11.94412 70.553642 32.638004 98.330666 59.581717s49.165333 60.276143 62.081649 96.52516c5.41652 15.277363 3.194358 32.221348-6.110945 45.276549-9.027533 13.332972-23.471586 20.832768-39.58226 20.832768z m-402.627967 0c-15.971789 0-30.415842-7.499797-39.721144-20.554998-9.305303-13.194087-11.527465-30.138071-6.110946-45.276549 13.055201-36.249017 34.44351-69.581446 62.08165-96.525159 27.777024-26.943714 61.664994-47.498712 98.330666-59.581718 7.638682-2.499932 15.694019 1.666621 18.19395 9.305304 2.499932 7.638682-1.666621 15.694019-9.305303 18.19395-65.692662 21.527194-118.885664 73.331344-142.218364 138.468467-2.361047 6.527601-1.388851 13.471857 2.499932 19.027261 3.749898 5.277635 9.583073 8.333107 16.110674 8.333107 7.916452 0 14.444053 6.527601 14.444053 14.444053 0 7.499797-6.24983 14.166282-14.305168 14.166282z" fill="#FFFFFF" p-id="47486"></path><path d="M439.849179 569.428998c-43.609928 0-84.581039-16.943985-115.413535-47.776482C293.603147 490.820019 276.659162 449.848908 276.659162 406.23898s16.943985-84.581039 47.776482-115.413536c30.832497-30.832497 71.803608-47.776482 115.413535-47.776482s84.581039 16.943985 115.413536 47.776482c30.832497 30.693612 47.776482 71.664723 47.776482 115.274651S586.095212 490.681134 555.262715 521.513631c-30.832497 30.832497-71.803608 47.915367-115.413536 47.915367z m0-297.630815c-74.02577 0-134.440798 60.276143-134.440797 134.440797S365.684525 540.679778 439.849179 540.679778c74.02577 0 134.440798-60.276143 134.440798-134.440798s-60.415028-134.440798-134.440798-134.440797z" fill="#FFFFFF" p-id="47487"></path></svg></span><span class="mui-tab-label">关于我们</span></a></nav>

代码结构解析:

这里标签主要代码结构为nav–>a(用作跳转)–>span(用两个span做icon和icon下面的标题)–>svg(主要是iconfont的使用);需要注意的是第一个span的class一定要加上mui-icon,不然你会发现icon和文字会并排显示不美观.

iconfont阿里巴巴矢量图标库使用技巧(主要用来引入底部导航栏矢量图标,简单实用):
首先到iconfont的官网(地址在Here),登录进去之后就可以找你自己喜欢的类型,比如搜索"首页"如下图:
在这里插入图片描述
然后直接选择一个自己想要的点击下载就会来到下图这里:

你可以随意调整颜色和大小,还可以调整局部的颜色,比如房子的眼睛和嘴巴就是我自己换的颜色. 调整好之后直接点右下角"复制SVG"代码,粘贴到你的代码里就可以直接使用了.

JavaScript代码:

		<script type="text/javascript">mui.init();var index = 0;var subpages = ['html/Home/Home.html', 'html/Service/service.html', 'html/ContactUs/contactus.html','html/AboutUs/aboutus.html'];mui.plusReady(function() {var self = plus.webview.currentWebview();for (var i = 0; i < subpages.length; i++) {var sub = plus.webview.create(subpages[i], subpages[i], {top: '0px',bottom: '50px'});if (i > index) {sub.hide();}self.append(sub);}});var activeTab = subpages[index];mui('.mui-bar-tab').on('tap', 'a', function() {var targetTab = this.getAttribute('href');if (activeTab == targetTab) {return;}if (mui.os.plus) {plus.webview.show(targetTab);plus.webview.hide(activeTab);activeTab = targetTab;} else {createIframe('.mui-content', {url: targetTab,style: {top: '45px',bottom: '50px'}})}});function createIframe(el, opt) {var elContainer = document.querySelector('mui-content');var wrapper = document.querySelector('.mui-iframe-wrapper');if (!wrapper) {wrapper = document.createElement('div');wrapper.className = 'mui-iframe-wrapper';for (var i in opt.style) {wrapper[i] = opt.style[i];}}var iframe = document.createElement('iframe');iframe.src = opt.url;iframe.id = opt.id || opt.url;iframe.name = opt.id;wrapper.appendChild(iframe);elContainer.appendChild(wrapper);}</script>