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 ...
随机推荐
- springboot启动报错start bean 'eurekaAutoServiceRegistration' NullPointerException
解决方案参考:https://blog.csdn.net/hhj13978064496/article/details/82825365 我将eureka的依赖包放到了依赖包的最下面,启动报错, 如下 ...
- Anaconda在Python3和Python2之间切换，Conda命令，anaconda中python的升级和降级
当在pycharm IDE中指定不同的Python版本时,设置方法 File->Setting->Project:XXXX->Project Interpreter 选择不同位 ...
- Docker容器日常操作命令
在Docker的运用中,从下载镜像,启动容器,在容器中输入命令来运行程序,这些命令都是手工一条条往里输入的,无法重复利用,而且效率很低.所以就需要一 种文件或脚本,我们把想执行的操作以命令的方式写入其 ...
- MySQL5.6多实例安装
MySQL-5.6.36.tar.gz多实例安装 查看官方安装说明 more INSTALL-SOURCE 安装cmake及相关依赖包 yum install -y cmake gcc [root@v ...
- 关闭myeclipse中烦人的鼠标划过,自动提示功能
eclipse越来越智能,身为码农的我却越来越伤心.虽然你很智能,但请你提供一些有用的信息给我,不要乱七八槽的,不问青红皂白就塞一大堆提示给我,对不起,哥不需要这些!!! 都知道,使用myeclips ...
- Drone - 安装，搭配 GitLab 下的配置和使用
参考资料: Drone 官网地址:https://drone.io Drone 的 GitHub 地址:https://github.com/drone/drone 简介:https://imnerd ...
- Colourful Rectangle【扫描线】
题目链接 很明显的可以发现是一个扫描线的问题,但是怎么处理区域呢,发现只有三种颜色,也就是最多也就是7种状态,那么我们可以进行一个状态压缩即可. 但是,在向上pushup的时候,存在我们要以子树的状态 ...
- .Net core 2.0 利用Attribute获取MVC Action来生成菜单
最近在学习.net core的同时将老师的MVC5项目中的模块搬过来用,其中有一块就是利用Attribute来生成菜单. 一·首先定义Action实体 /// <summary> /// ...
- 解决bug：sprongboot2整合shiro，swagger2页面样式加载不出来问题
问题如题: 解决思路,把shiro拦截去掉之后发现swagger-ui.html页面接在的资源如下: 因此可以推断拦截器拦截了 "/swagger-resources" " ...
- [eclipse中使用Git插件] 008 - git操作pull、merge、stash、commit
写在前面: 看标题其实还有001-007之类,本来准备写详细的类似教程一样的东东,但是懒了且时间有限(以后或许会补吧),所以跳到008,录下主要的操作. 所以本随笔的重点就是[pull+merge+s ...