我做的一个项目，首页包含mui的侧滑功能，都是我进到页面，页面的数据不会被显示，当我页面上的input框获取焦点时，页面的内容就会出来。我进入其他页面，再返回主页面时，主页面的内容也会被清空，但是请求已经被执行了，数据放不到页面上，不知道是什么bug。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, 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" type="text/css" href="css/mui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/swiper.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<!--<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js"></script>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/zepto.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="js/zepto_touch.js" type="text/javascript" charset="utf-8"></script>-->
<style>
html,
body {
background-color: #efeff4;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-left {
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input {
color: #000;
}
</style>
</head>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
<!--侧滑菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-left">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll" style="display: none;">
<div class="title">侧滑导航</div>
<div class="content">
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
</span>
<p style="margin: 10px 15px;">
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
</p>
</div>
<!--<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
</ul>-->
</div>
<div class="left-tap">
<!--头部-->
<div class="left-top-head">
<span><img src="img/left-tap-h1.png" class="left-top-head-img1"/></span>
<span><img src="img/left-tap-h2.png" class="left-top-head-img2"/></span>
</div>
<!--用户头像-->
<div class="left-top-user">
<div id="left-top-user-img">
<img src="img/head_.jpg" />
<span><img src="img/male.png"/></span>
<!--<span><img src="img/female.png"/></span>-->
</div>
<p class="register" style="color: #FFFFFF;">注册/登录</p>
<div class="scale">
<span>普</span>
<span>认</span>
<span>代</span>
<span>商</span>
</div>
</div>
<div class="user-list">
<div class="user-list-d" id="di1"><span class="user-list-d-sp1"><img src="img/my-order.png"/></span>
<div class="user-list-border" id="order-html">
<div class="my-order my-list">我的订单</div><span class="user-list-d-sp2"><img src="img/arrowrt-white.png"/></span></div>
</div>
<div class="user-list-d"><span class="user-list-d-sp1"><img src="img/my-collect.png"/></span>
<div class="user-list-border" id="collection-html">
<div class="my-order my-list">我的收藏</div><span class="user-list-d-sp2"><img src="img/arrowrt-white.png"/></span></div>
</div>
<div class="user-list-d"><span class="user-list-d-sp1"><img src="img/my-recommend.png"/></span>
<div class="user-list-border" id="myRecommend-html">
<div class="my-order my-list">我的推荐</div><span class="user-list-d-sp2"><img src="img/arrowrt-white.png"/></span></div>
</div>
<div class="user-list-d"><span class="user-list-d-sp1"><img src="img/my-address.png"/></span>
<div class="user-list-border" id="address-html">
<div class="my-order my-list">地址管理</div><span class="user-list-d-sp2"><img src="img/arrowrt-white.png"/></span></div>
</div>
<div class="user-list-d"><span class="user-list-d-sp1"><img src="img/Member.png"/></span>
<div class="user-list-border" id="Verified-Member">
<div class="my-order my-list">会员认证</div><span class="user-list-d-sp2"><img src="img/arrowrt-white.png"/></span></div>
</div>
<div class="user-list-d"><span class="user-list-d-sp1"><img src="img/alliance.png"/></span>
<div class="user-list-border" id="Alliance-business">
<div class="my-order my-list">联盟商家</div><span class="user-list-d-sp2"><img src="img/arrowrt-white.png"/></span></div>
</div>
<div class="user-list-d"><span class="user-list-d-sp1"><img src="img/apply-for.png"/></span>
<div class="user-list-border" id="Agent-Application">
<div class="my-order my-list">代理申请</div><span class="user-list-d-sp2"><img src="img/arrowrt-white.png"/></span></div>
</div>
<div class="user-list-d"><span class="user-list-d-sp1"><img src="img/after-sale.png"/></span>
<div class="user-list-border" id="reimburse">
<div class="my-order my-list">退款售后</div><span class="user-list-d-sp2"><img src="img/arrowrt-white.png"/></span></div>
</div>
</div>
<div class="left-top-center">
<div class="left-top-center-img">
<ul>
<li><img src="img/biaoqian.png" /></li>
<li><img src="img/biaoqian.png" /></li>
<li><img src="img/biaoqian.png" /></li>
<li><img src="img/biaoqian.png" /></li>
<li><img src="img/biaoqian.png" /></li>
</ul>
</div>
<div class="division"></div>
</div>
<div class="left-top-bottom">退出登录</div>
</div>
</div>
</aside>
<!--主界面部分-->
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-pull-left cont-a" id=""><img src="img/cont-a.png" /></a>
<a href="myCode.html" class="mui-btn mui-btn-link mui-pull-right" id="myCode"><img src="img/cont-code.png" /></a>
<h1 class="mui-title">首页</h1>
</header>
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="footer">
<ul>
<li>
<a href="main.html" class="light"><img src="img/home-light.png"><span>首页</span></a>
</li>
<li>
<a href="index.html" class="index"><img src="img/business.png"><span>商圈</span></a>
</li>
<li>
<a href="mall.html" class="mall"><img src="img/store.png"><span>商城</span></a>
</li>
<li>
<a href="credit.html" class="credit"><img src="img/Borrowing.png"><span>借贷</span></a>
</li>
</ul>
</div>
<div class="mui-scroll">
<div class="mui-content-padded">
<div id="right">
<!--<div class="mian_header">
<div class="header">
<span class="mybutton"></span>
<h2 class="title">首页</h2>
<a href="myCode.html" class="codebutton"></a>
</div>
</div>-->
<!--content start-->
<div class="main-content">
<div class="header-middle">
<!--banner图-->
<div class="top-banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<!--<div class="swiper-slide"><img src="img/banner1.png" alt=""></div>
<div class="swiper-slide"><img src="img/banner2.png" alt=""></div>-->
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!--扫一扫 付钱 start-->
<ul class="my-order-bottom">
<li class="wait-pay"><img src="img/main_c1.png" />扫一扫<i></i></li>
<li class="main_pay"><img src="img/main_c2.png" />付钱<i></i></li>
<li class="main_voucher"><img src="img/main_c3.png" />代金券<i></i></li>
<li class="main_member_update"><img src="img/main_c4.png" />会员升级<i></i></li>
</ul>
<div class="my-treasure">
<img src="img/my-treasure1.png" />我的财富
</div>
<div class="my-treasure-cat">
<ul>
<li class="my-balance-money">
<span><img src="img/main_c5.png"/></span>
<p class="li-p1">余额(元)</p>
<p class="li-p2"></p>
</li>
<li class="myhaibei">
<span><img src="img/main_c6.png"/></span>
<p class="li-p1">海贝(元)</p>
<p class="li-p2"></p>
</li>
</ul>
</div>
<div class="my-treasure">
<img src="img/my-treasure2.png" />我的积分
</div>
<div class="myintegral">
<ul>
<li class="wealthpoint">
<img src="img/main_c7.png" />
<p class="integral-p-1">财富积分</p>
<p class="integral-p-2"></p>
</li>
<li class="awardpoint">
<img src="img/main_c8.png" />
<p class="integral-p-1">奖励积分</p>
<p class="integral-p-2"></p>
</li>
<li class="freezepoint">
<img src="img/main_c9.png" />
<p class="integral-p-1">冻结积分</p>
<p class="integral-p-2"></p>
</li>
</ul>
</div>
<div class="my-treasure">
<img src="img/my-treasure3.png" />奖励积分兑换
</div>
<div class="convert">
<input type="text" name="" id="convert-input" value="" placeholder="请输入奖励积分数量" />
<div class="mui-input-row" id="convert-input-2">
<img src="img/main_c10.png" class="convert-img" />
<select name="select" id="select_k1">
<option value="0">海贝</option>
<option value="1">代金券</option>
</select>
</div>
<p class="convert-click">兑换</p>
<p class="convert-bottom">当前可兑换金额为元</p>
</div>
<div class="my-treasure affiche">
<img src="img/my-treasure4.png" /> 猜你喜欢<span><a class="more" href="mall.html">更多</a></span>
</div>
<div class="youLover">
<img src="img/youLove.png" />
<!--<ul id="youLove1">
<li><img src="img/c_failed_03.png"/></li>
<li><img src="img/c_failed_03.png"/></li>
</ul>
<ul id="youLove2">
<li><img src="img/avatar_03.png"/></li>
<li><img src="img/avatar_03.png"/></li>
<li><img src="img/avatar_03.png"/></li>
<li><img src="img/avatar_03.png"/></li>-->
</ul>
</div>
<div class="my-treasure affiche">
<img src="img/my-treasure5.png" /> 最新公告<span><a href="#">更多</a></span>
</div>
<div class="new-notice">
<ul>
<!--<li><img src="img/new-treasure.png" /><span class="new-notice-span1">可喜可贺11111111111111111111111111111111111哈哈哈哈或哈哈哈</span><span class="new-notice-span2">2017-4-15</span></li>
<li><img src="img/new-treasure.png" /><span class="new-notice-span1">可喜可贺哈哈哈哈或哈哈哈</span><span class="new-notice-span2">2017-4-15</span></li>
<li><img src="img/new-treasure.png" /><span class="new-notice-span1">可喜1111111可贺哈哈哈哈或哈哈哈</span><span class="new-notice-span2">2017-4-15</span></li>-->
</ul>
<div class="no-more"><img src="img/main_bottom.png" style="vertical-align: middle; width: .4rem;height: .4rem;margin-right: .15rem;" />没有更多了</div>
</div>
<!--content end-->
</div>
<!--包裹右边的-->
</div>
</div>
<div class="markmsg"></div>
<form class="mui-input-group" style="margin-bottom: 15px;display: none;">
<div class="mui-input-row mui-radio">
<label>主界面移动、菜单不动</label>
<input name="style" type="radio" checked="" value="main-move">
</div>
<div class="mui-input-row mui-radio">
<label>主界面不动、菜单移动</label>
<input name="style" type="radio" value="menu-move">
</div>
<div class="mui-input-row mui-radio mui-hidden" id="move-togger">
<label>整体移动</label>
<input name="style" type="radio" value="all-move">
</div>
<div class="mui-input-row mui-radio">
<label>缩放式侧滑（类手机QQ）</label>
<input name="style" type="radio" value="main-move-scalable">
</div>
</form>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script type="text/javascript">
$(function() {
//退出登录
$(".left-top-bottom").tap(function() {
//还有清除本地存储
localStorage.removeItem("mid")
localStorage.removeItem("token");
location.href = "login.html"
})
//点击兑换
$(".convert-click").tap(function() {
var convert_num = $("#convert-input").val();
var reg = /^[0-9]*$/;
if(!reg.test(convert_num) || convert_num == "") {
$(".markmsg").html("请输入正确金额");
$(".markmsg").css({ 'opacity': 1, "z-index": "11655" });
setTimeout(function() {
$(".markmsg").css({ 'opacity': 0, "z-index": "-1" });
}, 2000);
}
})
//判断用户是否登录
var mid = localStorage.getItem("mid");
var token = localStorage.getItem("token")
$.ajax({
type: "post",
url: httpUrl + "index",
data: {
mid: mid,
token: token
},
dataType: "json",
success: function(data) {
console.log(data);
if(data.status==0){
location.href = "login.html";
}
//console.log(data.img[0].img);
// if(data.status==1){
// alert(1);
//轮播图
var Banner = "";
for(var i = 0; i < data.img.length; i++) {
Banner += '<div class="swiper-slide" >' + '<span style="display:none;">' + data.img[i].img_id + '</span>' + '<img src="' + (httpImg + data.img[i].img) + '" />' + '</div>'
}
$(".top-banner").on("tap", ".swiper-container .swiper-slide", function() {
var id = $(this).find("span").text();
localStorage.setItem("img_id", id);
location.href = "mainImg.html"
})
$(".swiper-wrapper").html(Banner);
var mySwiper = new Swiper('.swiper-container', {
loop: true,
autoplay: 1500,
pagination: '.swiper-pagination'
});
mui.init({
swipeback: true
});
//我的奖励积分
$(".awardpoint .integral-p-2").html(data.member.credits1);
//我的财富积分
$(".wealthpoint .integral-p-2").html(data.member.credits2);
//我的余额
$(".my-balance-money .li-p2").html(data.member.credits3);
//我的海贝
$(".myhaibei .li-p2").html(data.member.credits5);
//我的冻结积分
$(".freezepoint .integral-p-2").html(data.member.freeze);
//最新公告
var notice = "";
for(var i = 0; i < data.notice.length; i++) {
notice += '<li>' +
'<img src="img/new-treasure.png" />' +
'<span class="notice_id" style="display:none;" >' + data.notice[i].id+ '</span>' +
'<span class="new-notice-span1">' + data.notice[i].title + '</span>' +
'<span class="new-notice-span2">' + UnixToDate(data.notice[i].create_time) + '</span>'
'</li>'
}
$(".new-notice ul").append(notice);
$(".new-notice ul li").tap(function(){
var id=$(this).find("span.notice_id").text();
console.log(id);
localStorage.setItem("notice_id",id);
location.href="main_notice_detail.html"
})
//用户头像，昵称
var user_img = httpImg + data.member.avatar;
var nickname = data.member.nickname;
var sex = data.member.sex;
localStorage.setItem("user_img",user_img);
localStorage.setItem("nickname",nickname);
localStorage.setItem("sex",sex);
if(user_img == "") {
$("#left-top-user-img>img").attr("src", "img/head_.jpg");
} else {
$("#left-top-user-img>img").attr("src", user_img);
}
//用户昵称处显示
if(mid != "" && token !== "") {
if(nickname == "") {
$(".register").html("");
} else {
$(".register").html(nickname)
}
} else {
$(".register").html("登录/注册")
}
//性别显示
if(sex==1){
$("#left-top-user-img span img").attr("src", "img/male.png");
}if(sex==2){
$("#left-top-user-img span img").attr("src", "img/female.png");
}
}
})
$(".left-top-user").tap(function() {
if(mid) {
location.href = "personal.html"
} else {
location.href = "login.html"; //存在userid去个人中心
}
})
//左边隐藏部分 普 认 代 商
var is_agent = localStorage.getItem("is_agent");
var is_vip = localStorage.getItem("is_vip");
var seller_id = localStorage.getItem("seller_id");
// alert(is_agent)
// alert(is_vip)
// alert(seller_id)
if(is_vip == 1) { //1为认证会员
$(".scale").find("span").eq(1).css("background", "#1AAFF4")
} else {
$(".scale").find("span").eq(1).css("background", "#8f8f8f")
}
if(is_agent == 1) { //1为代理
$(".scale").find("span").eq(2).css("background", "#1AAFF4")
} else {
$(".scale").find("span").eq(2).css("background", "#8f8f8f")
}
if(seller_id > 0) { //大于0为商家
$(".scale").find("span").eq(3).css("background", "#1AAFF4")
} else {
$(".scale").find("span").eq(3).css("background", "#8f8f8f")
}
})
</script>
<script>
$(".convert-click").tap(function() {
var exchangenum = $("#convert-input").val();
var myselect = document.getElementById("select_k1");
var index = myselect.selectedIndex;
var exchangename = myselect.options[index].value;
console.log(exchangenum);
console.log(exchangename);
/*location.href="awardexchange.html"*/
})
</script>
<script type="text/javascript">
(function($) {
$(".mui-scroll-wrapper").scroll({
//bounce: false,//滚动条是否有弹力默认是true
//indicators: false, //是否显示滚动条,默认是true
});
})(mui);
</script>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>
<script>
//侧滑容器父节点
mui('.mui-popover').popover('toggle');
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
if(!mui.os.android) {
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for(var i = 0, len = spans.length; i < len; i++) {
spans[i].style.display = "none";
}
}
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if(this.checked) {
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
classList.remove('mui-slide-in');
classList.remove('mui-scalable');
switch(this.value) {
case 'main-move':
if(moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
break;
case 'main-move-scalable':
if(moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
classList.add('mui-scalable');
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
case 'all-move':
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
break;
}
offCanvasWrapper.offCanvas().refresh();
}
});
/*
//主界面‘显示侧滑菜单’按钮的点击事件
document.getElementById('offCanvasShow').addEventListener('click', function() {
offCanvasWrapper.offCanvas('show');
});
//菜单界面，‘关闭侧滑菜单’按钮的点击事件
document.getElementById('offCanvasHide').addEventListener('click', function() {
offCanvasWrapper.offCanvas('close');
});
*/
$(".mui-off-canvas-backdrop").click(function() {
offCanvasWrapper.offCanvas('close');
})
//mui('.mui-off-canvas-wrap').offCanvas().close();
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台原生侧滑关闭页面；
if(mui.os.plus && mui.os.ios) {
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
});
});
}
</script>
</body> </html>
<script type="text/javascript">
$(document).ready(function() {
function setStatusbarRed() {
//沉浸模式
plus.navigator.setStatusBarBackground("#00A0E9");
plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackTranslucent"); //UIStatusBarStyleBlackOpaque
}
document.addEventListener('plusready', function() {
setStatusbarRed();
}, false);
$('body').height($('body')[0].clientHeight); //处理软键盘弹出的影响
$("#txtCustomsCode").keydown(function(e) { //给所需要处理的文本框处理keydown事件
e = e || window.event;
var code = e.keyCode || e.which;
if((code >= 96 && code <= 105) || (code >= 65 && code <= 90) || (code >= 48 && code <= 57)) { //可以输入大小写字母、数字（包括小键盘）
var userkeydown = $(this).val().substr(14);
var reg = /\*/;
$(this).val($(this).val().replace(reg, userkeydown));
$(this).val($(this).val().substr(0, 14))
} else
$(this).val($(this).val().substr(0, 14))
})
}) </script>
