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 ...
随机推荐
- nas请求响应示意图
curl nginx(proxy_connect) nginx(NAS) | | | | | | (1) |-- CONNECT 443 -> | | | | | | |---- [ TCP c ...
- web接口开发基础知识－什么是web接口？
比如我们访问百度的首页,输入的url地址是:https://www.baidu.com/ 那么当我们在浏览器地址栏中输入url,敲回车后,发生了什么事情?怎么就能通过1个url地址就能看到百度的首页了 ...
- BurpSuite从下载安装到配置使用
为解决一个XSS安全问题,第一次使用BurpSuite,记录一下下载安装到配置使用的过程,希望能对第一次使用该工具的朋友有所帮助. 一.下载及安装 直接百度下载破解版,我下的版本是burpsuite_ ...
- DataFrame API应用案例
DataFrame API 1.collect与collectAsList . collect返回一个数组,包含DataFrame中的全部Rows collectAsList返回一个Java List ...
- 彻底理解 Linux 的搜索工具： grep 和 awk
grep 官方手册 awk 官方手册, awk 学习资料 1. grep grep 用于打印匹配指定模式的行. 1.1 介绍 grep 命令从输入文件中查找匹配到给定模式列表的行.发现匹配到的行后,默 ...
- Grafana+Prometheus系统监控之Redis
REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI C语言编写.遵守B ...
- Python笔记(十二)_文件
文件的打开模式 'r':以只读的方式打开文件(默认) 'w':以写入的方式打开文件,会覆盖已存在的文件 'x':用写入的方式打开文件,如果文件已存在,会抛出异常 'a':用写入的方式打开文件,如果文件 ...
- Ubuntu TTy字体
目的:修改tty终端下的字体大小,中文显示,字体美观问题 Linux版本:xubuntu14.04 当切换到tty终端模式式,中文乱码,且字体太小,影响阅读.在网上搜了一些资料,将问题及解决方案记录如 ...
- org.apache.hadoop.hive.ql.exec.DDLTask. MetaException错误问题
下载 http://www.java2s.com/Code/Jar/m/Downloadmysqlconnectorjavacommercial517binjar.htm 放到lib目录下,删除原本的 ...
- python 注释有哪些和作用
python 单行注释 #作为代表 python 多行注释 ‘’‘ 这是三个单引号注释 ’‘’ “”“ 这是三个双引号注释 ”“”