MUI仿今日头条第三集--侧滑菜单制作

最新推荐文章于 2019-06-18 14:16:14 发布

源代码-张富银

最新推荐文章于 2019-06-18 14:16:14 发布

阅读量7k

点赞数 3

分类专栏： JavaScript|JQuery技术分享 HTML技术分享 HTML5与手机APP

本文链接：https://blog.csdn.net/myfirtyou/article/details/46453579

版权

HTML5与手机APP 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

JavaScript|JQuery技术分享

3 篇文章 0 订阅

订阅专栏

HTML技术分享

2 篇文章 0 订阅

订阅专栏

MUI仿今日头条第三集--侧滑菜单制作

今天我们主要来看侧滑菜单的制作

使用第二集中的打开侧滑菜单代码--打开侧滑菜单，我们参照今日头条发现，侧滑菜单的最顶部是登陆按钮。支持第三登陆以及本应用内的登陆

支持QQ、微信、微博的登陆，

一、先把CSS和html效果做出来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>

	<body>
		<div class="mui-content login">
			<div class="auth_login">
				<ul>
					<li class="mui-icon iconfont icon-shouji" id="login_tel"></li>
					<li class="mui-icon iconfont icon-qq" id="qq"></li>
					<li class="mui-icon iconfont icon-weixin" id="weixin"></li>
					<li class="mui-icon iconfont icon-weibo" id="weibo"></li>
				</ul>				
				<button class="mui-btn mui-btn-negative" style="margin-top: 15px; margin-left: 25%;">更多登陆方式</button>
			</div>		
		</div>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

上面的是html代码，在上面的代码中我们使用了自定义图标的功能，由于MUI把所有的图标都压缩成字体了文件了，所以我们也要参照MUI的做好把图标压缩为字体文件，此操作在作为单独一集来讲解

下面是CSS代码

body {
	background-color: #fff;
	border-radius: 3px;
}
@font-face {font-family: "iconfont";
        src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
.iconfont {
	font-family: "iconfont" !important;
	font-size: 35px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.5px;
	padding: 0 8px;
}

.icon-shouji:before { content: "\e629"; color: #4CD964;cursor: pointer;}
.icon-weixin:before { content: "\e603"; color: #2AC845; cursor: pointer;}
.icon-qq:before { content: "\e610";color: #007AFF;}
.icon-weibo:before { content: "\e62a"; color:#CF2D28}


.auth_login {
	background: #F3F3F3;
	margin: 0;
	padding: 0;
	border: 1px solid #FAFAFA;
}
.auth_login ul { list-style: none;}
.auth_login ul li{ float: left; height: 25px;}
.reg{
	color: #666;
	font-size:12px ;
	padding-top: 50px;
}
.reg span{width: 30px; height: 35px; line-height: 35px; margin-left: 10px;}
.reg input{width: 200px; border: none;}
.reg_notpass ul {
	list-style: none;
}
#reg{text-align: left; float: left;}
#notpass{float: left; padding-left: 50%;}
.login_btn{
	margin: 10% 15%;
	border: 1px solid red;
	width: 70%;
	color: red;
	font-size: 24px;
	font-weight: bold;
	height: 50px;
}

细心的同学可能已经发现了我们在上面的CSS代码中已经使用了字体文件和字体代码了

下面是侧滑菜单的JS代码

mui.init();
var aniShow = "slide-in-right";
//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
if (!mui.os.android) {
	var span = document.getElementById("android-only")
	if (span) {
		span.style.display = "none";
	}
	aniShow = "pop-in";
}
var subWebview = null,
	template = null,
	index = null;
//页面加载完毕后 获得首页的webview引用
mui.plusReady(function() {
	//获得主页面webview引用；
	index = plus.webview.currentWebview().opener();
});
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragstart', function(e) {
	mui.gestures.touch.lockDirection = true; //锁定方向
	mui.gestures.touch.startDirection = e.detail.direction;
});
window.addEventListener('dragleft', function(e) {
	if (!mui.isScrolling) {
		e.detail.gesture.preventDefault();
	}
});
//监听左滑事件，若菜单已展开，左滑要关闭菜单；
window.addEventListener("swipeleft", function(e) {
	if (Math.abs(e.detail.angle) > 170) {
		close();
	}
});
//打开登陆页面
document.getElementById('login_tel').addEventListener('tap', function() {
  //打开电话登陆页面
  mui.openWindow({
    url: 'login_tel.html', 
    id:'login_tel'
  });
});
//打开QQ登陆页面
//tap为mui封装的单击事件，可参考手势事件章节
document.getElementById('qq').addEventListener('tap', function() {
	//打开电话登陆页面
 	 mui.openWindow({
   		 url: 'login_qq.html', 
  	 	 id:'login_qq'
 	 });
});
//打开微信登陆页面
//tap为mui封装的单击事件，可参考手势事件章节
document.getElementById('weixin').addEventListener('tap', function() {
	//打开电话登陆页面
 	 mui.openWindow({
   		 url: 'login_weixin.html', 
  	 	 id:'login_weixin'
 	 });
});
//打开微博登陆页面
//tap为mui封装的单击事件，可参考手势事件章节
document.getElementById('weibo').addEventListener('tap', function() {
	//打开电话登陆页面
 	 mui.openWindow({
   		 url: 'login_weibo.html', 
  	 	 id:'login_weibo'
 	 });
});

好了，到此呢我们的侧滑菜单的登陆部分就算是做好了，当然此页面现在仅仅只有页面还没有实际功能，在下集中我们主要来讲解在MUI自定义图标

源代码-张富银

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
MUI仿今日头条第三集--侧滑菜单制作

MUI仿今日头条第三集--侧滑菜单制作今天我们主要来看侧滑菜单的制作使用第二集中的打开侧滑菜单代码--打开侧滑菜单，我们参照今日头条发现，侧滑菜单的最顶部是登陆按钮。支持第三登陆以及本应用内的登陆支持QQ、微信、微博的登陆，一、先把CSS和html效果做出来 Hello MUI
复制链接

扫一扫

专栏目录