MUI如何实现页面滚动

最新推荐文章于 2022-04-20 14:56:31 发布
最新推荐文章于 2022-04-20 14:56:31 发布
阅读量3k 收藏 6
点赞数 3
分类专栏： MUI H5 文章标签： MUI 页面滚动 mui-scroll-wrapper scroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36317441/article/details/80425605
版权
MUI 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
H5
2 篇文章 0 订阅
订阅专栏

开发的过程中要实现如下所示的表单页面，但是这个页面老是不能滚动，


后来百度了一下，总算解决了问题，需要用一段js代码来控制div层的滚动。

(function($) {
	$(".mui-scroll-wrapper").scroll({});
})(mui);

用这段代码就可以控制页面滚动了。

全部代码如下所示：

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--我的mui.min.css文件是放在MUI/css下面的，请根据你自己的情况进行修改-->
		<link href="MUI/css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-scroll-wrapper" style="margin-bottom: 80px;background: white;">
			<div class="mui-scroll">
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">联系人姓名：</label>
					<input id="Contacts" style="width: 50%;margin-left:23px" type="text" placeholder="联系人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">用车人姓名<i class="redStar">*</i>：</label>
					<input id="PersonName" style="width: 50%;margin-left:17px" type="text" placeholder="用车人姓名">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">用车人手机号<i class="redStar">*</i>：</label>
					<input id="PersonMobile" style="width: 50%;" type="number" placeholder="用车人手机号">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">用车人固话：</label>
					<input id="PersonTel" style="width: 50%;margin-left:23px" type="text" placeholder="用车人固话">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">乘车人数<i class="redStar">*</i>：</label>
					<input id="PersonCount" style="width: 50%;margin-left:32px" οnkeyup="value=value.replace(/[^\d\.]/g,'')" type="text" placeholder="乘车人数">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">起始地点<i class="redStar">*</i>：</label>
					<input id="StartAdress" style="width: 50%;margin-left:32px" type="text" placeholder="起始地点">
				</div>
				<div class="mui-row">
					<label style="padding: 0px 10px;">目的地点<i class="redStar">*</i>：</label>
					<input id="EndAdress" style="width: 50%;margin-left:32px" type="text" placeholder="目的地点">
				</div>

			</div>
		</div>
		<!--我的mui.min.js文件是放在MUI/js下面的，请根据你自己的情况进行修改-->
		<script src="MUI/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();

			(function($) {
				$(".mui-scroll-wrapper").scroll({});
			})(mui);
		</script>
	</body>

</html>
如果本文对您有所帮助，麻烦点击一下左侧的点赞按钮，谢谢
qq风轻云淡
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
mui滚动条 的实现源代码
11-15
mui滚动条 代码
mui单页面应用框架（含demo）
03-13
基于mui框架开发的单页面应用框架（含demo），实现页面跳转路由，单页面开发html应用，避免页面跳转导致的用户体验差的问题
MUI之父页面刷新
12-12
这个是MUI框架父页面刷新的Demo，MUI是一个比较好用的国产前端H5框架
mui,h5+中实现控制页面load显示 原创
01-05
load页面在混合APP的开发中非常的重要，因为混合开发部像是原生app,很多都需要提前加载数据，或者留出加载数据的时间，一个号的LOAD可以让APP更加的人性化，体验更加好一些。 下面就是在MUI中实现LOAD的代码： show:{ // openwindow 函数内设置 autoShow:false } // 目标页面 //从服务器获取数据 .... 这里是业务逻辑 //业务数据获取完毕，并已插入当前页面DOM； //注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后； mui.plusReady(function(){ //关闭等待框 plus.nati
移动端开发框架mui之scroll(区域滚动)
zgphacker2010的专栏
03-13 3279
MUI 官网：https://www.dcloud.io/mui.html MUI 文档：https://dev.dcloud.net.cn/mui/ui/ 演示地址：https://dcloud.io/hellomui/ （支持手机和电脑浏览器） 开发工具：https://www.dcloud.io/hbuilderx.html （Hbuilder X） scroll (区域滚动) 在App开发中，div区域滚动的需求是普遍存在的，但系统默认实现又有如下问题： Android平台4.0以.
解决mui-popover 弹出菜单不能滚动的一次实践
weixin_42429311的博客
04-19 1474
mui-popover菜单弹窗的事项，及Unable to preventDefault inside passive event listener due to target being treated as passive 报错的解决方案。
MUI-header+沉浸式+下滑头部背景渐变
LzzMandy的博客
01-08 2324
头部机构如下: &lt;header class="mui-bar mui-bar-transparent bg"&gt; &lt;a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"&gt;&lt;/a&gt; &lt;h1 class="mui-title"&gt; &amp
移动端开发框架mui之注意事项及制作登录页
zgphacker2010的专栏
03-07 1442
MUI 官网：https://www.dcloud.io/mui.html MUI 文档：https://dev.dcloud.net.cn/mui/ui/ 演示地址：https://dcloud.io/hellomui/ （支持手机和电脑浏览器） 开发工具：https://www.dcloud.io/hbuilderx.html （Hbuilder X） mui框架中，默认封装了类似 jquery 的语法，进行元素的事件绑定、ajax操作、上拉刷新、下拉加载等操作。 1、mui事件处理： 一般情况下
MUI-scroll滚动，重新定位滚动位置
LzzMandy的博客
01-17 4656
dom结构： 使用mui区域滚动，把需要滚动的内容放在其中 &lt;div class="mui-scroll-wrapper"&gt; &lt;div class="mui-scroll"&gt; &lt;!--这里放置真实显示的DOM内容--&gt; &lt;/div&gt; &lt;/div&gt; 初始化加载滚动条： mui('#mui-scroll')
mui 页面滚动解决方案
weixin_30546189的博客
01-04 504
默认情况下mui 页面不能滚动，以下为解决方案： 1.mui('.mui-scroll-wrapper').scroll({ 　　deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 }); 2.(function($){ $(".mui-scroll-wrapper").scroll({ ...
mui框架 页面无法滚动的解决方法(推荐)
08-28
下面小编就为大家分享一篇mui框架 页面无法滚动的解决方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
mui简单的表单案例
weixin_45787600的博客
03-17 1542
效果图： html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>mui表单</ti.
最接近原生APP体验的高性能前端框架 ：MUI框架 基础入门（特性，组件，表单）
qq_45596525的博客
01-09 1319
文章目录前言一、特性1.轻量2.原生UI3.流畅度二、组件1.折叠面板，卡片，轮播图，列表2.角标，对话框，蒙板3.日期选择器4.进度条，滑块，开关三、表单四、总结（废话） 前言 MUI框架是一款轻量级的面向移动端的web前端框架，在开发者仅掌握前端开发技术的情况下，就能快速地开发一款移动端应用。简而言之，即使你在对于安卓，IOS系统底层一无所知的情况下，也能开发出一款高性能的移动端app。 提示：以下是本篇文章正文内容，下面案例可供参考 一、特性 1.轻量 作为一款框架，压缩后的JS和CSS文件仅有
mui 区域局部竖直滑动
baidu_24743861的博客
10-28 590
<body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">标题</h1> &...
MUI scroll(区域滚动)问题
你是欢喜的年少
03-30 5841
                                                 MUI scroll(区域滚动)问题 1）在手机APP上，我们需要进行组件的滑动或者定位，可能会出现滑动方法不起作用。 例如： 功能：滚动到特定位置 方法：scrollTo( xpos , ypos [, duration] ) 案例：mui('.mui-scroll-wrapper')....
mui选项卡怎么实现循环轮播
Amouzy的博客
04-20 873
最近接触了mui前端框架，要做的需求是做一个可以循环轮播的选项卡，结果查看官方文档对轮播组件居然只是寥寥几笔，连怎么轮播都没说。 没办法只能自己琢磨，最后误打误撞约莫是实现轮播了： 简要html代码： <div class="mui-slider client-slider"> <div class="tab-title-box"> <div id="sliderSegmentedControl1" class="mui-sli
[MUI专题] 区域滚动
算法与编程之美
08-05 474
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。前言MUI提供了区域滚动的组件，使用时遵循DOM结构就可以。若是需要使用区域滚动的组件，就需要初...
mui无法滚动？这里是解决办法之一
竹亦叶同的博客
04-18 1851
这里不是故意抄文档，但确实是方法 鄙人用mui,但是发现无法滚动！ 最终认真看文档解决问题！！！！ 以下是文档内容↓↓↓ 文档后有个人一点小解析 scroll(区域滚动) 在App开发中，div区域滚动的需求是普遍存在的，但系统默认实现又有如下问题： Android平台4.0以下不支持div滚动 Android平台4.0以上支持div滚动，但不显示滚动条 弹出层的div滚动在iOS平台存在事件透...
MUI实现区域滚动
热门推荐
fy_long的博客
10-14 1万+
移动端页面区域滚动的实现 基于MUI 引入相关包 &lt;!-- 1. 引入mui的CSS文件 --&gt; &lt;link rel="stylesheet" href="lib/mui/css/mui.css"&gt; &lt;!-- 2. 引入mui的js文件 --&gt; &lt;script src="lib/mui/js/mui.js"&gt;&lt;/scrip
mui如何实现页面跳转
最新发布
07-13
在mui中，可以使用以下方法来实现页面跳转： 1. 使用`mui.openWindow`方法打开一个新窗口，示例代码如下： ```javascript mui.openWindow({ url: 'new_page.html', id: 'new_page' }); ``` 2. 使用`mui....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值