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 width: 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 width: 100%; 38 z-index: 20; 39 } 40 .mui-content { 41 margin-top: 5rem;/*滾動區域距離頭部和底部的距離*/
42 margin-bottom: 6rem; 43 } 44
45 .next { 46 width: 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="width: 25%" type="text" placeholder="起始日期">
147 <label style="width: 15%">至</label>
148 <input class="inp2" style="width: 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="width: 25%" type="text" placeholder="起始日期">
317 <label style="width: 15%">至</label>
318 <input class="inp2" id="endData" style="width: 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>