正文

mui滚动区域的实现

IP云
IP云V管理员/4 阅读
09/19
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

mui框架实现页面中间区域滚动，头部和底部固定不动,要滚动的区域一定要有mui-scroll-wrapper 和 mui-scroll 包裹

<div class="mui-content mui-scroll-wrapper" id="mui-content">
<div class="mui-scroll">
<div class="content>
......滚动内容区域
</div>
<div class="content>
......滚动内容区域
</div> </div>
</div>

并且要在js代码中加入这句代码

//局部滚动
mui.init();
mui('.mui-scroll-wrapper').scroll({
bounce: false,
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

mui-scroll-wrapper的父元素必须要相对定位

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人基本信息</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" href="../css/public/mui.min.css">
<link rel="stylesheet" href="../css/public/mui.picker.min.css"/>
<link rel="stylesheet" href="../css/public/mui.poppicker.css">
<!--<link rel="stylesheet" href="../css/public/public.css">-->
<!--<link rel="stylesheet" href="../css/basicInfo.css">--> <style>
* {
touch-action: pan-y;
}
#baseInfo {
position: relative;/*父元素必须是绝对定位*/
top: 0rem;
left: 0rem;
right: 0rem;
bottom: 0rem;
overflow: hidden; /*超出部分隐藏*/
width: 100%;
height: 100vh;
}
.header {
display: flex;
flex-direction: row;
font-family: PingFangSC-Regular;
padding-top: 1rem;
padding-bottom: 1rem;
background: #D8D8D8;
height: 4rem; /*头部的高度*/
width: 100%;
z-index: 20;
}
.mui-content {
margin-top: 5rem;/*滚动区域距离头部和底部的距离*/
margin-bottom: 6rem;
} .next {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem auto;
/* position: absolute; */
bottom: 0rem;
position: fixed;
z-index: 10;
}
</style>
</head>
<body style="background: rgba(0,0,0,.05);height: 100%;position: relative">
<!--<div id="signUp" class="mui-popover mui-popover-action mui-popover-bottom">--> <div id="baseInfo" class="wrapper" style="position: relative">
<div class="header">
<div class="return"><a href="homePage.html">< 返回</a></div>
<div class="title">个人基本信息(1/8)</div>
</div>
<div class="mui-content mui-scroll-wrapper" id="mui-content">
<div class="mui-scroll">
<form class="mui-input-group">
<div class="mui-input-row text realName">
<label>姓名</label>
<input type="text" placeholder="填写真实姓名">
</div>
<div class="mui-input-row text sex">
<label>性别</label>
<input type="text" placeholder="选择性别">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text national">
<label>民族</label>
<input type="text" placeholder="选择民族">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text nativePlace">
<label>籍贯</label>
<input type="text" placeholder="填写籍贯">
</div>
<div class="mui-input-row text height">
<label>身高</label>
<input type="text" placeholder="填写身高cm">
</div>
<div class="mui-input-row text weight">
<label>体重</label>
<input type="text" placeholder="填写体重kg">
</div>
<div class="mui-input-row text data birthData">
<label>出生日期</label>
<input type="text" placeholder="选择日期">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text birthPlace">
<label>出生地</label>
<input type="text" placeholder="填写出生地">
</div>
<div class="mui-input-row text jdidCard">
<label>建档立卡号</label>
<input type="text" placeholder="填写建档立卡号">
</div>
<div class="mui-input-row text houseType">
<label>户口性质</label>
<input type="text" placeholder="选择户口性质">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text housePlace">
<label>户口所在地</label>
<input type="text" placeholder="填写户口所在地">
</div>
<div class="mui-input-row text lationship">
<label>与户主关系</label>
<input type="text" placeholder="选择与户主关系">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text idCard">
<label>身份证号</label>
<input type="text" placeholder="填写身份证号">
</div>
<div class="mui-input-row text qfOrgin">
<label>签发机关</label>
<input type="text" placeholder="填写签发机关">
</div>
<div class="mui-input-row text validity data">
<label>有效期</label>
<input class="inp1" style="width: 25%" type="text" placeholder="起始日期">
<label style="width: 15%">至</label>
<input class="inp2" style="width: 25%" type="text" placeholder="结束日期">
</div>
<div class="mui-input-row text yesOrno">
<label>独生子女</label>
<input type="text" placeholder="选择是否是独生子女">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text yesOrno2">
<label>军烈属</label>
<input type="text" placeholder="选择是否是军烈属">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text healthy">
<label>健康状况</label>
<input type="text" placeholder="选择健康状况">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text healthyNum">
<label>健康证号</label>
<input type="text" placeholder="填写健康证号">
</div>
<div class="mui-input-row text yesOrno3">
<label>退役军人</label>
<input type="text" placeholder="选择是否是退役军人">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text yesOrno4">
<label>低保户</label>
<input type="text" placeholder="选择是否是低保户">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text yesOrno5">
<label>五保户</label>
<input type="text" placeholder="选择是否是五保户">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text yesOrno6">
<label>双女户</label>
<input type="text" placeholder="选择是否是双女户">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text culture">
<label>文化程度</label>
<input type="text" placeholder="选择文化成程度">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text laborCapacity">
<label>劳动能力</label>
<input type="text" placeholder="选择劳动能力">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text bank">
<label>银行开户行</label>
<input type="text" placeholder="填写银行开户行">
</div>
<div class="mui-input-row text bankNum">
<label>银行账号</label>
<input type="text" placeholder="填写银行账号">
</div>
<div class="mui-input-row text yesOrno7">
<label>懂英语</label>
<input type="text" placeholder="选择是否懂英语">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text englishlevel">
<label>英语水平</label>
<input type="text" placeholder="选择英语水平">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text yesOrno8">
<label style="font-size: 13px">参加新型农村合作医疗</label>
<input style="font-size: 13px" type="text" placeholder="选择是否参加新型农村合作医疗">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text yesOrno9">
<label style="font-size: 13px">参加城乡居民基本养老</label>
<input style="font-size: 13px" type="text" placeholder="选择是否参加城乡居民基本养老">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text yesOrno10">
<label>懂普通话</label>
<input type="text" placeholder="选择是否懂普通话">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text mandarinlevel1">
<label>口语水平</label>
<input type="text" placeholder="选择口语水平">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text mandarinlevel2">
<label>阅读水平</label>
<input type="text" placeholder="选择阅读水平">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div> </div>
<div class="mui-input-row text mandarinlevel3">
<label>写作水平</label>
<input type="text" placeholder="选择写作水平">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div> </form>
</div>
<!--<div class="mui-content-padded">--> <!--</div>-->
</div>
<!--<a class="submit"><div class="orange">提交申请</div></a>-->
<!--</li>-->
<div class="mui-table-view mui-table-view-chevron next">
<a href="connectInfo.html" class="x-next">下一步</a>
</div>
<!--</ul>--> </div>
<div id="jnpopover" class="box mui-popover mui-poppicker mui-popover-action mui-popover-bottom"
style="height: 485px;background-color: #fff;">
<div class="mui-popover-arrow"></div>
<div class="popoverheader">
<div class="text">添加培训经历</div>
<a href="#jnpopover"><img src="../image/close.png" alt=""></a>
</div> <form class="mui-input-group" style="margin-right: 0rem;margin-left: 0rem">
<div class="mui-input-row text validity data">
<label>起止日期</label>
<input class="inp1" id="startData" style="width: 25%" type="text" placeholder="起始日期">
<label style="width: 15%">至</label>
<input class="inp2" id="endData" style="width: 25%" type="text" placeholder="结束日期">
</div>
<div class="mui-input-row text trainOragin">
<label>培训机构</label>
<input type="text" id="trainOragin" placeholder="填写培训机构">
<!--<img class="triangle" src="../image/xiala.png" alt="">-->
</div>
<div class="mui-input-row text trainContent">
<label>培训内容</label>
<input type="text" id="trainContent" placeholder="填写培训内容">
<!--<div class="img">-->
<!--<img class="triangle" src="../image/xiala.png" alt="">-->
<!--</div>-->
</div>
<div class="mui-input-row text trainType">
<label>培训形式</label>
<input type="text" id="trainType" placeholder="填写培训形式">
<!--<div class="img">-->
<!--<img class="triangle" src="../image/xiala.png" alt="">-->
<!--</div>-->
</div>
<div class="mui-input-row text certificateNum">
<label>所获证书</label>
<input type="text" id="trainCertificate" placeholder="填写所获证书">
</div>
<div class="mui-input-row text certificategrade">
<label>证书等级</label>
<input type="text" id="certificategrade" placeholder="填写证书等级">
</div>
<div class="mui-input-row text certificateNum">
<label>证书编号</label>
<input type="text" id="certificateNum" placeholder="填写证书编号">
</div>
<div class="mui-input-row text issueData">
<label>颁发日期</label>
<input type="text" id="issueData" placeholder="填写颁发日期">
<div class="img">
<img class="triangle" src="../image/xiala.png" alt="">
</div>
</div>
<div class="mui-input-row text issueOrgin">
<label>颁发机构</label>
<input type="text" id="issueOrgin" placeholder="填写颁发机构"> </div>
</form>
<div class="mui-table-view mui-table-view-chevron next">
<a href="#jnpopover" class="x-next add">添加</a>
</div>
<!--<div id="add" class="mui-views">-->
<!--<div class="mui-view">-->
<!--<div class="mui-navbar">-->
<!--</div>-->
<!--<div class="mui-pages">-->
<!--<div class="mui-table-view mui-table-view-chevron next">-->
<!--<a href="#popover" class="x-next add">添加</a>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div> <!--<div id="app" class="mui-views">-->
<!--<div class="mui-view">-->
<!--<div class="mui-navbar">-->
<!--</div>-->
<!--<div class="mui-pages">-->
<!--<div class="mui-table-view mui-table-view-chevron next">-->
<!--<a href="connectInfo.html" class="x-next">下一步</a>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</body> <script src="../js/public/mui.min.js"></script>
<script src="../js/public/mui.poppicker.js"></script>
<script src="../js/public/mui.picker.min.js"></script>
<script src="../js/public/md5.js"></script>
<script src="../js/public/better-scroll.js"></script>
<script src="../js/public/secureUtil.js"></script>
<script src="../js/public/core.js"></script>
<script src="../js/public/enc-base64.js"></script>
<script src="../js/public/cipher-core.js"></script>
<script src="../js/public/aes.js"></script>
<script src="../js/public/public.js"></script>
<script src="../js/basicInfo.js"></script> <script>
mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
</script>
</html>