MUI 下载引用矢量图、实现底部切换、实现轮播滚动

MUI调用手机硬件：http://www.html5plus.org/doc/h5p.html
MUI 官方文档：https://dev.dcloud.net.cn/mui/

1、下载引用矢量图

1.打开阿里矢量图 官网 https://www.iconfont.cn/
2.搜索需要的图标，加入购物车，增加入库，
3.点击 购物车图标，增加至项目，没项目就新建项目，
4.在上方 切换为 Symbol 代码，然后点击下载到本地
5.在项目 index.html 中，引入下载的 js 文件，
6.在网页把矢量图专用他css样式复制进去

		<style type="text/css">
			.icon {
				width: 1em;
				height: 1em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
		</style>

7…找到需要修改的地方，如果原来有图标就把原来图标代码去掉即可，

(1).原来代码：

	<span class="mui-icon mui-icon-home"></span><!-- 九宫格中的图标 -->

(2).替换后代码

	<span class="mui-icon">
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#在这里写矢量图对应的代码"></use>
			<use xlink:href="#icon-tushu"></use> 这里写的是图书
		</svg>
	</span>

2、实现底部切换

<script type="text/javascript">
	  	mui.init();
		//实现底部选项卡切换功能 mui.plu
		mui.plusReady(function () {//手机加载完毕就工作
			//定义一个容器，用于存储底部选项卡所关联的页面
			var pages = ["xingfudao_index.html","xingfudao_contact.html","xingfudao_h5plus.html","xingfudao_wode.html"];
			//获取当前窗口对象
			var ws = plus.webview.currentWebview();
			//设置页面窗口样式
			var pageStyle = {
				top:"0px",
				bottom:"50px"
			};
			//循环数组，为每个页面创建 webview 窗口对象
			for(var i = 0;i<pages.length;i++){
				//将每次循环提取的页面创建为 webview 窗口对象
				var item = plus.webview.create(pages[i],pages[i],pageStyle);
				//将每个 weview 窗口对象追加至当前 ws 对象中
				ws.append(item);
			}
			//设置默认打开窗口
			plus.webview.show(pages[0]);
			//选项卡事件监听
		    mui(".mui-bar-tab").on("tap","a",function(){
				//获取被点击a标签的href属性值
				var href = this.getAttribute("href");
				//展示对应的页面
				plus.webview.show(href);
			});
		});
	</script>

3、实现轮播滚动

<script type="text/javascript">
	mui.init();
	//获取当前文档中轮播图组件对象
	var sliderObj = mui("#slider");
	sliderObj.slider({
		interval: 1000 //1000毫秒的间隔
	});
</script>