1. 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代码中加入这句代码

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

mui滚动区域的实现的更多相关文章

  1. iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...

  2. IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug

    尽管在项目中测试人员已经慢慢淡化了IE6的测试,但是IE7依然还是要纳入测试范围. 最近碰到一个IE7的蛋疼bug,在页面上设置了一个局部的滚动区域,在拖动滚动条的时候,滚动区域内设置了相对定位或绝对 ...

  3. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  4. MUI 滚动插件使用

    在Vue中 使用MUI滚动插件 官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll 示例:初始化scroll控件: mui('.mui-scroll-wrap ...

  5. JS实现滚动区域触底事件

    效果 贴上效果展示: 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现. 接下来看看js方面的实现,其实也很简单,触发的条件是: 可视高度 + 滚动距离 ...

  6. 第15.29节 PyQt(Python+Qt)入门学习：containers容器类部件QScrollArea滚动区域详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 Scroll Area提供了一个呈现在其他部件上的可滚动区域视图,滚动区域用于显示框架内的 ...

  7. PyQt（Python+Qt）学习随笔：QScrollArea滚动区域的alignment属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域的alignment属性对应QScrollArea的alignment属性,用于控制滚动区域 ...

  8. PyQt（Python+Qt）学习随笔：QScrollArea滚动区域layout布局的作用及设置方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域可以设置布局,布局的作用其实与其他布局一样,就是在滚动区域大小调整时,滚动区域内的子部件跟随 ...

  9. PyQt（Python+Qt）学习随笔：QScrollArea滚动区域的scrollAreaWidgetContents、widget及setWidget等相关概念解释

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在Designer中设计将一个lable放到滚动区域上,使用PyUIC生成代码后,可以看到除了QSc ...

随机推荐

  1. python之_init_()方法浅析

    在python的类中,我们会经常看到一个类中的一个方法_init_(self) ,比如下面的一个例子: class Student(object): def __init__(self,name,we ...

  2. php面试专题---MYSQL查询语句优化

    php面试专题---MYSQL查询语句优化 一.总结 一句话总结: mysql的性能优化包罗甚广: 索引优化,查询优化,查询缓存,服务器设置优化,操作系统和硬件优化,应用层面优化(web服务器,缓存) ...

  3. ruby在类中访问@，类外访问调用方法

    class Box def initialize(w,h) @width,@height=w,h end def printWidth puts @width end def printHeight ...

  4. C#-概念-接口：接口

    ylbtech-C#-概念-接口:接口 接口(硬件类接口)是指同一计算机不同功能层之间的通信规则称为接口. 接口(软件类接口)是指对协定进行定义的引用类型.其他类型实现接口,以保证它们支持某些操作.接 ...

  5. 20160122 DataView RowFilter语法

    原文出自:http://www.csharp-examples.net/dataview-rowfilter/ DataView RowFilter语法(c#) 这个例子描述了DataView.Row ...

  6. C++ 测量程序执行时间的办法

    #include <time.h> clock_t start = clock(); //时间起始 /*待测试代码*/ clock_t end = clock(); //时间测试结束 co ...

  7. python实现基于两张图片生成圆角图标效果的方法

    python实现基于两张图片生成圆角图标效果的方法 这篇文章主要介绍了python实现基于两张图片生成圆角图标效果的方法,实例分析了Python使用pil模块进行图片处理的技巧,分享给大家供大家参考. ...

  8. poj1065Wooden Sticks(dp——最长递减数列)

    Description There is a pile of n wooden sticks. The length and weight of each stick are known in adv ...

  9. JavaWeb——servlet1

    一.servlet简介 Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于 ...

  10. 5.1properties属性

    需求: 将数据库连接参数单独配置在db.properties文件中,只需在SqlMapconfig.xml中加载db.properties的属性值. 在SqlMapconfig.xml中就不需要对数据 ...