Development background: front-end framework uses sui style framework; page uses jq;
1. Dynamically introduce related js files
Due to the routing characteristics of sui, when jumping to a new page, the js of the new page cannot be loaded, only the js of the main page is loaded and running, and the objects and methods defined on the new page are basically unavailable to call; check in debug mode When viewing the page jump, only the static page html content has changed, and the js is still the js of the page before the jump. Therefore, the monitoring page jump method is used here, and the camera js is dynamically introduced;
$(document).on("pageInit", function (e, pageId, $page) {
if (pageId == "index-page") {
console.log("index-page");
page = 1;
list='';
initIndexList(page, limit);
//首次进入首页校验加载图标是否显示
if (count<=limit){
$('.infinite-scroll-preloader').remove();
}
} else if (pageId == "addpage") {
//新增页面
console.log("addpage");
//动态加载js文件
loadJsFile("categoryJs.js");
loadJsFile("readimage.js");
loadJsFile("exif.js");
$('.content').scrollTop(0);
}else if (pageId == "datailPage") {
//详情页面
console.log("datailPage");
$('.content').scrollTop(0);
viewInfoPage(idFlag);
}
});Two, page elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>app</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/sui-mobile/css/sm.min.css" media="all"/>
<script src="/sui-mobile/jquery-3.1.1/jquery.min.js"></script>
<!--<script src="/common/bootstrap-3.3.0/js/bootstrap.min.js"></script>-->
<script src="/sui-mobile/js/sm.js"></script>
</head>
<body>
<div class="page-group">
<!-- page 容器 -->
<div class="page" id="addpage">
<!-- 标题栏 -->
<header class="bar bar-nav">
<!--<a class="icon icon-me pull-left open-panel"></a>-->
<button class="button button-link button-nav pull-left" onclick="toIndexPage2()">
<span class="icon icon-left"></span>
返回
</button>
<h1 class="title"></h1>
</header>
<!-- 这里是页面内容区 -->
<div class="content">
<div class="list-block">
<form>
<input type="hidden" name="" id="">
<input type="hidden" name="GUID_" id="GUID_">
<input type="hidden" name="SERVICETYPENAME" id="SERVICETYPENAME">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">申请事项</div>
<div class="item-input">
<select id="SERVICETYPECODE" name="SERVICETYPECODE" onchange="showTip()">
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">申请人</div>
<div class="item-input">
<input type="text" placeholder="请输入" id="CREATEUSERNAME" name="CREATEUSERNAME">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">身份证号</div>
<div class="item-input">
<input type="text" placeholder="请输入" id="IDENTITYNUM" name="IDENTITYNUM">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">联系电话</div>
<div class="item-input">
<input type="text" placeholder="请输入" id="CREATETELNUM" name="CREATETELNUM">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">地址</div>
<div class="item-input">
<input type="text" placeholder="请输入" id="ADDRESS" name="ADDRESS">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">事项描述</div>
<div class="item-input">
<textarea id="DESCRIP" name="DESCRIP" placeholder="请输入"></textarea>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">图片</div>
<div class="item-input" >
<div style="overflow: auto;white-space: nowrap;padding-top: 7px;padding-bottom: 7px;">
<!--<div style="width: 80px;height: 80px;display:inline-block;position: relative;border: #ECECEC 1px solid;text-align: center">
<img src="add.png" style="width: 40px;margin-top: 18px;">
<input id="upload" style="opacity:0;width:100%;height:100%;position:absolute;top:0;left:0" type="file" accept="image/*" multiple />
</div>-->
<!-- 图片放置区域 -->
<div id="pictureInfo" class="imageShow">
<div id="place1" style="display: none;">
<img onclick="layerImage(this,0)" src="" style="width: 100%;height: 100%;" id="place1-img"/>
</div>
<div id="place2" style="display: none;">
<img onclick="layerImage(this,1)" src="" style="width: 100%;height: 100%;" id="place2-img"/>
</div>
<div id="place3" style="display: none;">
<img onclick="layerImage(this,2)" src="" style="width: 100%;height: 100%;" id="place3-img"/>
</div>
<div id="place4" style="display: none;">
<img onclick="layerImage(this,3)" src="" style="width: 100%;height: 100%;" id="place4-img"/>
</div>
<div id="place5" style="display: none;">
<!--<img onclick="layerImage(this,4)" src="#" style="width: 100%;height: 100%;" id="place5-img"/>-->
</div>
<div id="place6">
<label for="files_upload1" id="upload">
<div style="border: 0px #f00 solid;width: 100%;"></div>
<input type="file" multiple="multiple" id="files_upload1" style="opacity: 0;width: 0;"/>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-content tip-div" style="display: none;padding-right: .75rem;">
</div>
</li>
</ul>
</form>
</div>
<div class="content-block">
<a href="#" onclick="save()" class="button button-big button-fill">提交</a>
</div>
<div class="content-padded">
</div>
<div id="layer">
<img id="layerImg" src="" width="100%"/>
<p id="confirm" class="buttons-row"><a href="#" onclick="confirmY()" class="button active">确定</a><a href="#" onclick="confirmN()" class="button ">删除</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Third, introduce relevant css styles
<style type="text/css">
/*body{background: #f0f0f0;margin: 0;width: 100%;}*/
#upload {
border-top: 1px #CCC solid;
}
#place6 {
background-image: url(add.png);
background-repeat: no-repeat;
background-position: .6em;
background-size: 3em;
background-position-x: 47%;
}
.imageShow {
border: 0px #CCC solid;
height: 4.5em;
width: 100%;
/*margin-top: 10px;*/
}
.imageShow div {
float: left;
margin-left: 2%;
border: 1px #CCC solid;
width: 21%;
height: 4.5em;
}
.imageShow #place6{
border: 1px #CCC solid;
}
#imageInfo {
border: 0px #f00 solid;
position: absolute;
top: 8em;
right: 0;
left: 0;
bottom: 0;
background-color: black;
color: white;
font-size: 14px;
padding-left: 10px;
overflow: auto;
}
#layer {
z-index: 20;
border: 0px #f00 solid;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: black;
align-items: center;
justify-content: center;
display: none;
}
#confirm {
color: white;
position: absolute;
bottom: 0px;
}
#confirm div {
float: left;
border: 1px white solid;
padding-left: 50px;
padding-right: 50px;
padding-top: 8px;
padding-bottom: 8px;
}
.list-block .item-text {
}
</style>Note: The two files readimage.js and exif.js can be downloaded from my resources; in addition, this method also fixes the problem of rotation of pictures after uploading pictures on some Android phones; the front end converts the pictures into base64 encoding, unified and form data Submit it to the background for processing, and then convert the image encoding into a file in the background; you can also use the formdata submission method to transfer the image file to the background interface; the effect is as follows:
