mui框架实现页面中间区域滚动，头部和底部固定不动,要滚动的区域一定要有这两层包住，
<div class="mui-content mui-scroll-wrapper" id="mui-content"> <div class="mui-scroll"> <div class="content> ......滚动内容区域 </div> </div></div>
完整代码如下：<!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>
