mui滚动区域的实现
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>
mui滚动区域的实现的更多相关文章
- iScroll滚动区域中select、input、textarea元素无法点击的Bug修复
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...
- IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug
尽管在项目中测试人员已经慢慢淡化了IE6的测试,但是IE7依然还是要纳入测试范围. 最近碰到一个IE7的蛋疼bug,在页面上设置了一个局部的滚动区域,在拖动滚动条的时候,滚动区域内设置了相对定位或绝对 ...
- 解决iScroll横向滚动区域无法拉动页面的问题
近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...
- MUI 滚动插件使用
在Vue中 使用MUI滚动插件 官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll 示例:初始化scroll控件: mui('.mui-scroll-wrap ...
- JS实现滚动区域触底事件
效果 贴上效果展示: 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现. 接下来看看js方面的实现,其实也很简单,触发的条件是: 可视高度 + 滚动距离 ...
- 第15.29节 PyQt(Python+Qt)入门学习：containers容器类部件QScrollArea滚动区域详解
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 Scroll Area提供了一个呈现在其他部件上的可滚动区域视图,滚动区域用于显示框架内的 ...
- PyQt（Python+Qt）学习随笔：QScrollArea滚动区域的alignment属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域的alignment属性对应QScrollArea的alignment属性,用于控制滚动区域 ...
- PyQt（Python+Qt）学习随笔：QScrollArea滚动区域layout布局的作用及设置方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域可以设置布局,布局的作用其实与其他布局一样,就是在滚动区域大小调整时,滚动区域内的子部件跟随 ...
- PyQt（Python+Qt）学习随笔：QScrollArea滚动区域的scrollAreaWidgetContents、widget及setWidget等相关概念解释
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在Designer中设计将一个lable放到滚动区域上,使用PyUIC生成代码后,可以看到除了QSc ...
随机推荐
- react-navigation 实战
npm install --save react-navigation 1.测试TabNavigator.StackNavigator和DrawerNavigator (1)新建HomeScreen. ...
- Card Collector AtCoder - 5168(二分图匹配的HALL定理)
题意: 给定一个H行W列的矩阵,在矩阵的格点上放带权值的卡片(一个点上能放多张). 现在从每行每列各拿走一张卡片(没有可以不拿),求可以拿到的最大权值. 卡片数N<=1e5,H,W<=1e ...
- UI自动化处理文件上传
UI自动化处理文件上传 import win32guiimport win32con def set_uploader(self, file_path): sleep(2) self.file_pat ...
- 安装loadrunner11的时候提示'命令行选项语法错误。键入命令 / ?’ 怎么办
重启电脑后再安装.若还是不行就运行安装程序自带的vcredist_x86.exe,在我电脑的安装包的目录是loadrunner-11\lrunner\Kor\prerequisites\vc2005_ ...
- CentOS7通过SpeedTest工具测速
首先要安装SpeedTest工具,这里提供两种方法安装SpeedTest: 一.通过直接下载SpeedTest脚本,给权限运行脚本即可 [root@bogon ~]#wget -O speedtest ...
- jvm学习（5） 对象的创建与结构
上图表明:jvm虚拟机位于操作系统的堆中,并且,程序员写好的类加载到虚拟机执行的过程是:当一个classLoder启动的时候,classLoader的生存地点在jvm中的堆,然后它会去主机硬盘上将A. ...
- P3740 [HAOI2014]贴海报
题目描述 Bytetown城市要进行市长竞选,所有的选民可以畅所欲言地对竞选市长的候选人发表言论.为了统一管理,城市委员会为选民准备了一个张贴海报的electoral墙. 张贴规则如下: electo ...
- axios 利用new FileReader() 下载文件获取返回的错误信息
this.axios({ method: "post", url: url, data: data, ...
- Springboot2.x整合SpringSecurity
一.Spring Security是什么?有什么作用(核心作用)?以及如何阅读本篇文章 1.是什么 Spring Security是Spring家族的一个强大的安全框架,与Springboot整合的比 ...
- JS高级 — 函数的声明和表达式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...