mui框架实现页面中间区域滚动，头部和底部固定不动,要滚动的区域一定要有mui-scroll-wrapper 和 mui-scroll 包裹
1 <div class="mui-content mui-scroll-wrapper" id="mui-content">
2 <div class="mui-scroll">
3 <div class="content>
4 ......滚动内容区域
5 </div>
6 <div class="content>
7 ......滚动内容区域
8 </div>
9
10 </div>
11 </div>
并且要在js代码中加入这句代码
//局部滚动
mui.init();
mui('.mui-scroll-wrapper').scroll({
bounce: false,
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
mui-scroll-wrapper的父元素必须要相对定位
完整代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>个人基本信息</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
7 <meta name="apple-mobile-web-app-capable" content="yes">
8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
9 <link rel="stylesheet" href="../css/public/mui.min.css">
10 <link rel="stylesheet" href="../css/public/mui.picker.min.css"/>
11 <link rel="stylesheet" href="../css/public/mui.poppicker.css">
12 <!--<link rel="stylesheet" href="../css/public/public.css">-->
13 <!--<link rel="stylesheet" href="../css/basicInfo.css">-->
14
15 <style>
16 * {
17 touch-action: pan-y;
18 }
19 #baseInfo {
20 position: relative;/*父元素必须是绝对定位*/
21 top: 0rem;
22 left: 0rem;
23 right: 0rem;
24 bottom: 0rem;
25 overflow: hidden; /*超出部分隐藏*/
26 100%;
27 height: 100vh;
28 }
29 .header {
30 display: flex;
31 flex-direction: row;
32 font-family: PingFangSC-Regular;
33 padding-top: 1rem;
34 padding-bottom: 1rem;
35 background: #D8D8D8;
36 height: 4rem; /*头部的高度*/
37 100%;
38 z-index: 20;
39 }
40 .mui-content {
41 margin-top: 5rem;/*滚动区域距离头部和底部的距离*/
42 margin-bottom: 6rem;
43 }
44
45 .next {
46 100%;
47 display: flex;
48 align-items: center;
49 justify-content: center;
50 margin: 1rem auto;
51 /* position: absolute; */
52 bottom: 0rem;
53 position: fixed;
54 z-index: 10;
55 }
56 </style>
57 </head>
58 <body style="background: rgba(0,0,0,.05);height: 100%;position: relative">
59 <!--<div id="signUp" class="mui-popover mui-popover-action mui-popover-bottom">-->
60
61
62 <div id="baseInfo" class="wrapper" style="position: relative">
63 <div class="header">
64 <div class="return"><a href="homePage.html">< 返回</a></div>
65 <div class="title">个人基本信息(1/8)</div>
66 </div>
67 <div class="mui-content mui-scroll-wrapper" id="mui-content">
68 <div class="mui-scroll">
69 <form class="mui-input-group">
70 <div class="mui-input-row text realName">
71 <label>姓名</label>
72 <input type="text" placeholder="填写真实姓名">
73 </div>
74 <div class="mui-input-row text sex">
75 <label>性别</label>
76 <input type="text" placeholder="选择性别">
77 <div class="img">
78 <img class="triangle" src="../image/xiala.png" alt="">
79 </div>
80 </div>
81 <div class="mui-input-row text national">
82 <label>民族</label>
83 <input type="text" placeholder="选择民族">
84 <div class="img">
85 <img class="triangle" src="../image/xiala.png" alt="">
86 </div>
87
88 </div>
89 <div class="mui-input-row text nativePlace">
90 <label>籍贯</label>
91 <input type="text" placeholder="填写籍贯">
92 </div>
93 <div class="mui-input-row text height">
94 <label>身高</label>
95 <input type="text" placeholder="填写身高cm">
96 </div>
97 <div class="mui-input-row text weight">
98 <label>体重</label>
99 <input type="text" placeholder="填写体重kg">
100 </div>
101 <div class="mui-input-row text data birthData">
102 <label>出生日期</label>
103 <input type="text" placeholder="选择日期">
104 <div class="img">
105 <img class="triangle" src="../image/xiala.png" alt="">
106 </div>
107
108 </div>
109 <div class="mui-input-row text birthPlace">
110 <label>出生地</label>
111 <input type="text" placeholder="填写出生地">
112 </div>
113 <div class="mui-input-row text jdidCard">
114 <label>建档立卡号</label>
115 <input type="text" placeholder="填写建档立卡号">
116 </div>
117 <div class="mui-input-row text houseType">
118 <label>户口性质</label>
119 <input type="text" placeholder="选择户口性质">
120 <div class="img">
121 <img class="triangle" src="../image/xiala.png" alt="">
122 </div>
123
124 </div>
125 <div class="mui-input-row text housePlace">
126 <label>户口所在地</label>
127 <input type="text" placeholder="填写户口所在地">
128 </div>
129 <div class="mui-input-row text lationship">
130 <label>与户主关系</label>
131 <input type="text" placeholder="选择与户主关系">
132 <div class="img">
133 <img class="triangle" src="../image/xiala.png" alt="">
134 </div>
135 </div>
136 <div class="mui-input-row text idCard">
137 <label>身份证号</label>
138 <input type="text" placeholder="填写身份证号">
139 </div>
140 <div class="mui-input-row text qfOrgin">
141 <label>签发机关</label>
142 <input type="text" placeholder="填写签发机关">
143 </div>
144 <div class="mui-input-row text validity data">
145 <label>有效期</label>
146 <input class="inp1" style=" 25%" type="text" placeholder="起始日期">
147 <label style=" 15%">至</label>
148 <input class="inp2" style=" 25%" type="text" placeholder="结束日期">
149 </div>
150 <div class="mui-input-row text yesOrno">
151 <label>独生子女</label>
152 <input type="text" placeholder="选择是否是独生子女">
153 <div class="img">
154 <img class="triangle" src="../image/xiala.png" alt="">
155 </div>
156 </div>
157 <div class="mui-input-row text yesOrno2">
158 <label>军烈属</label>
159 <input type="text" placeholder="选择是否是军烈属">
160 <div class="img">
161 <img class="triangle" src="../image/xiala.png" alt="">
162 </div>
163 </div>
164 <div class="mui-input-row text healthy">
165 <label>健康状况</label>
166 <input type="text" placeholder="选择健康状况">
167 <div class="img">
168 <img class="triangle" src="../image/xiala.png" alt="">
169 </div>
170
171 </div>
172 <div class="mui-input-row text healthyNum">
173 <label>健康证号</label>
174 <input type="text" placeholder="填写健康证号">
175 </div>
176 <div class="mui-input-row text yesOrno3">
177 <label>退役军人</label>
178 <input type="text" placeholder="选择是否是退役军人">
179 <div class="img">
180 <img class="triangle" src="../image/xiala.png" alt="">
181 </div>
182 </div>
183 <div class="mui-input-row text yesOrno4">
184 <label>低保户</label>
185 <input type="text" placeholder="选择是否是低保户">
186 <div class="img">
187 <img class="triangle" src="../image/xiala.png" alt="">
188 </div>
189
190 </div>
191 <div class="mui-input-row text yesOrno5">
192 <label>五保户</label>
193 <input type="text" placeholder="选择是否是五保户">
194 <div class="img">
195 <img class="triangle" src="../image/xiala.png" alt="">
196 </div>
197
198 </div>
199 <div class="mui-input-row text yesOrno6">
200 <label>双女户</label>
201 <input type="text" placeholder="选择是否是双女户">
202 <div class="img">
203 <img class="triangle" src="../image/xiala.png" alt="">
204 </div>
205 </div>
206 <div class="mui-input-row text culture">
207 <label>文化程度</label>
208 <input type="text" placeholder="选择文化成程度">
209 <div class="img">
210 <img class="triangle" src="../image/xiala.png" alt="">
211 </div>
212
213 </div>
214 <div class="mui-input-row text laborCapacity">
215 <label>劳动能力</label>
216 <input type="text" placeholder="选择劳动能力">
217 <div class="img">
218 <img class="triangle" src="../image/xiala.png" alt="">
219 </div>
220
221 </div>
222 <div class="mui-input-row text bank">
223 <label>银行开户行</label>
224 <input type="text" placeholder="填写银行开户行">
225 </div>
226 <div class="mui-input-row text bankNum">
227 <label>银行账号</label>
228 <input type="text" placeholder="填写银行账号">
229 </div>
230 <div class="mui-input-row text yesOrno7">
231 <label>懂英语</label>
232 <input type="text" placeholder="选择是否懂英语">
233 <div class="img">
234 <img class="triangle" src="../image/xiala.png" alt="">
235 </div>
236
237 </div>
238 <div class="mui-input-row text englishlevel">
239 <label>英语水平</label>
240 <input type="text" placeholder="选择英语水平">
241 <div class="img">
242 <img class="triangle" src="../image/xiala.png" alt="">
243 </div>
244
245 </div>
246 <div class="mui-input-row text yesOrno8">
247 <label style="font-size: 13px">参加新型农村合作医疗</label>
248 <input style="font-size: 13px" type="text" placeholder="选择是否参加新型农村合作医疗">
249 <div class="img">
250 <img class="triangle" src="../image/xiala.png" alt="">
251 </div>
252 </div>
253 <div class="mui-input-row text yesOrno9">
254 <label style="font-size: 13px">参加城乡居民基本养老</label>
255 <input style="font-size: 13px" type="text" placeholder="选择是否参加城乡居民基本养老">
256 <div class="img">
257 <img class="triangle" src="../image/xiala.png" alt="">
258 </div>
259 </div>
260 <div class="mui-input-row text yesOrno10">
261 <label>懂普通话</label>
262 <input type="text" placeholder="选择是否懂普通话">
263 <div class="img">
264 <img class="triangle" src="../image/xiala.png" alt="">
265 </div>
266 </div>
267 <div class="mui-input-row text mandarinlevel1">
268 <label>口语水平</label>
269 <input type="text" placeholder="选择口语水平">
270 <div class="img">
271 <img class="triangle" src="../image/xiala.png" alt="">
272 </div>
273
274 </div>
275 <div class="mui-input-row text mandarinlevel2">
276 <label>阅读水平</label>
277 <input type="text" placeholder="选择阅读水平">
278 <div class="img">
279 <img class="triangle" src="../image/xiala.png" alt="">
280 </div>
281
282 </div>
283 <div class="mui-input-row text mandarinlevel3">
284 <label>写作水平</label>
285 <input type="text" placeholder="选择写作水平">
286 <div class="img">
287 <img class="triangle" src="../image/xiala.png" alt="">
288 </div>
289 </div>
290
291 </form>
292 </div>
293 <!--<div class="mui-content-padded">-->
294
295 <!--</div>-->
296 </div>
297 <!--<a class="submit"><div class="orange">提交申请</div></a>-->
298 <!--</li>-->
299 <div class="mui-table-view mui-table-view-chevron next">
300 <a href="connectInfo.html" class="x-next">下一步</a>
301 </div>
302 <!--</ul>-->
303
304 </div>
305 <div id="jnpopover" class="box mui-popover mui-poppicker mui-popover-action mui-popover-bottom"
306 style="height: 485px;background-color: #fff;">
307 <div class="mui-popover-arrow"></div>
308 <div class="popoverheader">
309 <div class="text">添加培训经历</div>
310 <a href="#jnpopover"><img src="../image/close.png" alt=""></a>
311 </div>
312
313 <form class="mui-input-group" style="margin-right: 0rem;margin-left: 0rem">
314 <div class="mui-input-row text validity data">
315 <label>起止日期</label>
316 <input class="inp1" id="startData" style=" 25%" type="text" placeholder="起始日期">
317 <label style=" 15%">至</label>
318 <input class="inp2" id="endData" style=" 25%" type="text" placeholder="结束日期">
319 </div>
320 <div class="mui-input-row text trainOragin">
321 <label>培训机构</label>
322 <input type="text" id="trainOragin" placeholder="填写培训机构">
323 <!--<img class="triangle" src="../image/xiala.png" alt="">-->
324 </div>
325 <div class="mui-input-row text trainContent">
326 <label>培训内容</label>
327 <input type="text" id="trainContent" placeholder="填写培训内容">
328 <!--<div class="img">-->
329 <!--<img class="triangle" src="../image/xiala.png" alt="">-->
330 <!--</div>-->
331 </div>
332 <div class="mui-input-row text trainType">
333 <label>培训形式</label>
334 <input type="text" id="trainType" placeholder="填写培训形式">
335 <!--<div class="img">-->
336 <!--<img class="triangle" src="../image/xiala.png" alt="">-->
337 <!--</div>-->
338 </div>
339 <div class="mui-input-row text certificateNum">
340 <label>所获证书</label>
341 <input type="text" id="trainCertificate" placeholder="填写所获证书">
342 </div>
343 <div class="mui-input-row text certificategrade">
344 <label>证书等级</label>
345 <input type="text" id="certificategrade" placeholder="填写证书等级">
346 </div>
347 <div class="mui-input-row text certificateNum">
348 <label>证书编号</label>
349 <input type="text" id="certificateNum" placeholder="填写证书编号">
350 </div>
351 <div class="mui-input-row text issueData">
352 <label>颁发日期</label>
353 <input type="text" id="issueData" placeholder="填写颁发日期">
354 <div class="img">
355 <img class="triangle" src="../image/xiala.png" alt="">
356 </div>
357 </div>
358 <div class="mui-input-row text issueOrgin">
359 <label>颁发机构</label>
360 <input type="text" id="issueOrgin" placeholder="填写颁发机构">
361
362 </div>
363 </form>
364 <div class="mui-table-view mui-table-view-chevron next">
365 <a href="#jnpopover" class="x-next add">添加</a>
366 </div>
367 <!--<div id="add" class="mui-views">-->
368 <!--<div class="mui-view">-->
369 <!--<div class="mui-navbar">-->
370 <!--</div>-->
371 <!--<div class="mui-pages">-->
372 <!--<div class="mui-table-view mui-table-view-chevron next">-->
373 <!--<a href="#popover" class="x-next add">添加</a>-->
374 <!--</div>-->
375 <!--</div>-->
376 <!--</div>-->
377 <!--</div>-->
378 </div>
379
380 <!--<div id="app" class="mui-views">-->
381 <!--<div class="mui-view">-->
382 <!--<div class="mui-navbar">-->
383 <!--</div>-->
384 <!--<div class="mui-pages">-->
385 <!--<div class="mui-table-view mui-table-view-chevron next">-->
386 <!--<a href="connectInfo.html" class="x-next">下一步</a>-->
387 <!--</div>-->
388 <!--</div>-->
389 <!--</div>-->
390 <!--</div>-->
391 </body>
392
393
394 <script src="../js/public/mui.min.js"></script>
395 <script src="../js/public/mui.poppicker.js"></script>
396 <script src="../js/public/mui.picker.min.js"></script>
397 <script src="../js/public/md5.js"></script>
398 <script src="../js/public/better-scroll.js"></script>
399 <script src="../js/public/secureUtil.js"></script>
400 <script src="../js/public/core.js"></script>
401 <script src="../js/public/enc-base64.js"></script>
402 <script src="../js/public/cipher-core.js"></script>
403 <script src="../js/public/aes.js"></script>
404 <script src="../js/public/public.js"></script>
405 <script src="../js/basicInfo.js"></script>
406
407
408 <script>
409 mui('.mui-scroll-wrapper').scroll({
410
411 deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
412 });
413 </script>
414 </html>