移动端开发框架mui之scroll(区域滚动)、动态获取数据无法滚动问题

已于 2024-09-02 17:46:19 修改
阅读量3.5k 收藏 4
点赞数
分类专栏： 移动端开发 文章标签： html5 mui
于 2021-03-13 22:16:45 首次发布
原文链接：https://dev.dcloud.net.cn/mui/ui/#scroll
版权

MUI 官网：MUI - DCloud

MUI 文档：UI组件 · MUI

演示地址：https://dcloud.io/hellomui/ （支持手机和电脑浏览器）

开发工具：https://www.dcloud.io/hbuilderx.html （Hbuilder X）

scroll (区域滚动)

在App开发中，div区域滚动的需求是普遍存在的，但系统默认实现又有如下问题：

  • Android平台4.0以下不支持div滚动
  • Android平台4.0以上支持div滚动，但不显示滚动条
  • 弹出层的div滚动在iOS平台存在事件透传的问题

因此，mui额外提供了区域滚动组件，使用时需要遵循如下DOM结构：

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--这里放置真实显示的DOM内容-->
	</div>
</div>

区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置滚动区域的位置（top和height）

若使用区域滚动组件，需手动初始化scroll控件

*常用配置项:

scroll.options

options = {
 scrollY: true, //是否竖向滚动
 scrollX: false, //是否横向滚动
 startX: 0, //初始化时滚动至x
 startY: 0, //初始化时滚动至y
 indicators: true, //是否显示滚动条
 deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
 bounce: true //是否启用回弹
}

示例：初始化scroll控件：

mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

mui中iOS平台的下拉刷新（Android平台的下拉刷新使用的是双webview+原生滚动方案）、popover、可拖动式选项卡均使用了scroll组件。 为方便大家使用，mui还额外为scroll插件封装了部分方法。

滚动到特定位置

滚动到底部位置

滚动到顶部的代码比较容易实现,坐标值设为0、0即可；但滚动到底部，需要计算该区域的实际高度，因此mui封装了scrollToBottom方法。

横向滚动

横向滚动只需在 scroll 组件基础上添加 mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted 这三个class即可.(给子元素添加 mui-control-item 可加大文字间距增强体验
如:)

<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
        <a class="mui-control-item mui-active">
            推荐
        </a>
        <a class="mui-control-item">
            热点
        </a>
        <a class="mui-control-item">
            北京
        </a>
        <a class="mui-control-item">
            社会
        </a>
        <a class="mui-control-item">
            娱乐
        </a>
        <a class="mui-control-item">
            科技
        </a>
    </div>
</div>

原文链接：

UI组件 · MUI

动态获取数据无法滚动问题

2024-09-02 更新

提示：动态获取数据后，需要调用控件重新执行 mui('.mui-scroll').scroll() 方法

需求：页面打开弹出菜单，不全屏显示及部分元素在滚动区域滚动

官方demo地址：Hello MUI

演示截图：

上代码：基于弹出菜单非全屏显示及滚动操作，所以需要修改css 及 js 文件。
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>主页管理</title>
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link href="../css/mui.picker.min.css" rel="stylesheet" />
	<link href="../css/mui.poppicker.css" />
	<link href="../css/icons-extra.css" rel="stylesheet" />
	<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1000;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
				margin-bottom: 100px;/** 显示加载提示信息： 没有更多数据了等等。 */
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			
			/**
			 * 设置在线状态： 自定义文字
			 */
			.mui-switch:before {
				content: '离线';
				color: #999; 
			}
			
			.mui-switch.mui-active:before {
				content: '在线';
				color: #fff;
			}
			
			 #topPopover {
				  position: fixed;
				  top: 16px;
				  right: 6px;
				  height: 430px;
			  }
			  
			/* #mui-popover-menu {
				  
			  } */
			
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
	
		/**
		 * 弹出层样式
		 */
		.mui-popover{
			height: 100%;
		}
		/**
		 * 上传文件样式
		 */
		.mui-popover .image-list {
			width: 100%;
			height: 85px;
			background-size: cover;
			padding: 10px 10px;
			overflow: hidden;
		}
		.mui-popover .image-item.space {
			border: none;
		}
		.mui-popover .image-item {
			width: 65px;
			height: 65px;
			background-image: url(../img/iconfont-tianjia.png);
			background-size: 100% 100%;
			display: inline-block;
			position: relative;
			border-radius: 5px;
			margin-right: 10px;
			margin-bottom: 10px;
			border: solid 1px #e8e8e8;
		}
		.mui-popover .image-item input[type="file"] {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
			/* z-index: 0; */
		}
		
		.mui-popover .image-item.space .image-close {
			display: none;
		}
		.mui-popover .image-item .image-close {
			position: absolute;
			display: inline-block;
			right: -6px;
			top: -6px;
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			border-radius: 12px;
			background-color: #FF5053;
			color: #f3f3f3;
			border: solid 1px #FF5053;
			font-size: 9px;
			font-weight: 200;
			/* z-index: 1; */
		}
		
		#top2Popover {
			position: absolute;
			/* height: 100%; */
			/* position: fixed; */
			
			z-index: 100000000;
			top: 16px;
			right: 6px;
		}
		#top2Popover .mui-popover-arrow {
			left: auto;
			right: 6px;
		}
		#top2Popover .mui-popover-arrow p {
			text-indent: 22px;
		}
		#top2Popover.mui-popover {
			/* min-height: 50px; */
			/* height: 450px; */
			height: 450px;
			/* overflow: scroll; */
			/* height: auto; */
		}
		#top2Popover.mui-popover .mui-scroll-wrapper {
			/* min-height: 50px; */
			/* height: 450px; */
			/* height: 450px; */
			height: 100%;
			/* padding-bottom: 50px; */
			
			/* overflow: scroll; */
			/* height: auto; */
		}
		#top2Popover.mui-popover .mui-scroll {
			height: 100%;
			overflow: scroll;
		}
		#top2Popover.mui-popover .mui-table-view{
			padding-top: 50px;
			padding-bottom: 100px;
			/* overflow: scroll; */
		}
	
		
		/* 		
		.view-content-page {
			
		} */
		
		.view-content-page {
			height: auto;
		}
		/* .view-content {
			
		} */
		
		.view-content {
			display: block;
			position: relative;
			/* left: 0; */
			/* right: 0; */
			/* top: 0; */
			/* bottom: 0; */
			width: 100%;
			height: 100%;;
			/* background-color: #efeff4; */
		}
		
		.view-content textarea {
			border: none !important;
		}
		.view-content textarea {
			/* height: 100px; */
			margin-bottom: 0 !important;
			padding-bottom: 0 !important;
		}
		.view-content .row {
			width: 100%;
			/* background-color: #fff; */
		}
		.view-content p {
			padding: 5px 22px;
			color: #000;
		}	
			
		</style>

</head>
<body  style="background-color: #FFFFFF;">

	<!-- 主页面容器 start-->
	<div class="mui-inner-wrap" id="uploadMainPageSide">	
	<header class="mui-bar mui-bar-nav" style="background-color: #007aff;"> 
		<div style="height: 44px;right: 40px;left: 40px;color: #FFFFFF;position: absolute;top: 0px;">
			<div style="width: 100%;height: 44px;line-height: 44px;text-align: center;font-size: 20px;">运维系统</div>
		</div>
		<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left" href="#topPopover" style="color: #FFFFFF;"></a>
		<!-- <a class="mui-icon mui-icon-person-filled mui-pull-left" style="color: #FFFFFF;" id="userInfoBtn"></a> -->
		<!-- <a class="mui-icon mui-icon-extra mui-icon-extra-trend mui-pull-right" style="color: #FFFFFF;" id="faultInfoCountBtn"></a> -->
		<a class="mui-icon mui-icon-extra mui-icon-extra-notice mui-pull-right" style="color: #FFFFFF;margin-right: 0px;" id="sysMessageBtn">
			<span class="mui-badge mui-badge-danger" style="margin-top: 7px;margin-left: -22px;" >0</span>
		</a>
		<!-- <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#top2Popover" style="color: #FFFFFF;"></a> -->
		 <!-- <a class="mui-icon mui-icon mui-icon-search mui-pull-right" style="color: #FFFFFF;margin-right: 0px;display: none;"  id="gotoDeviceSearchBtn">
		 </a> -->
		 <a class="mui-action-menu mui-icon mui-icon-search mui-pull-right" style="color: #FFFFFF;margin-right: 0px;" href="#top2Popover"  id="gotoFaultInfoSearchBtn">
		 </a>
	</header>	
	<div class="mui-content" style="background-color:#fff" >
		<div id="slider" class="mui-slider mui-fullscreen" >
			<div style="padding: 10px 10px;z-index: 1000;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" id="mui-control-item0" data-index="0" href="#item0">新任务<span class="mui-icon-extra mui-icon-extra-filter" style="font-size: 16px;"></span></a>
					<a class="mui-control-item" id="mui-control-item1" data-index="1" href="#item1" >待处理</a>
					<a class="mui-control-item" id="mui-control-item2"  data-index="2" href="#item2" >处理中</a>
					<a class="mui-control-item" id="mui-control-item3"  data-index="3" href="#item3" >已完成</a>
				</div>
			</div> 
			<div class="mui-slider-group">   
				<div id="item0"  class="mui-slider-item mui-control-content mui-active">
					<div  class="mui-scroll-wrapper item0">
						<div class="mui-scroll mui-scroll-list" style="padding-bottom: 160px;">
							<form class="mui-input-group itemList0" id="itemList0">
							</form>	
							<div id="tab-empty0" class="" wdith="100%" style="text-align: center;"><img src="../img/icon_empty.png" style="width: 200px;height: 200px;"></div>
						</div>
					</div> 
				</div> 
				<div id="item1" class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper item1">
						<div class="mui-scroll mui-scroll-list"  style="padding-bottom: 160px;">
						<form class="mui-input-group itemList1" id="itemList1">
						</form>	
						<div  id="tab-empty1" wdith="100%" style="text-align: center;"><img src="../img/icon_empty.png" style="width: 200px;height: 200px;"></div>
						</div>
					</div>
				</div> 
				<div id="item2" class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper item2">
						<div class="mui-scroll mui-scroll-list" style="padding-bottom: 160px;">
							<form class="mui-input-group itemList2" id="itemList2">
							</form>	
							<div id="tab-empty2"  wdith="100%" style="text-align: center;"><img src="../img/icon_empty.png" style="width: 200px;height: 200px;"></div>
						</div>
					</div>
				</div>
				<div id="item3" class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper item3">
						<div class="mui-scroll mui-scroll-list" style="padding-bottom: 160px;">
							<form class="mui-input-group itemList3" id="itemList3">
							</form>	
							<div id="tab-empty3"  wdith="100%" style="text-align: center;"><img src="../img/icon_empty.png" style="width: 200px;height: 200px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>	
	</div>
	</div>
	<!-- 主页面容器 end-->
	<!-- 操作菜单 -->
	<div id="topPopover" class="mui-popover" style="display: none;">
		<div class="mui-popover-arrow" style="left:248px"></div>
		<div class="mui-scroll-wrapper" data-scroll="1"> 
			<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" id="userInfoBtn"><a href="javascript:;" class=""><span class="mui-icon mui-icon-person-filled">&nbsp;&nbsp;个人信息</span></a>
					</li>
					<li class="mui-table-view-cell" id="attendanceBtn"><a href="javascript:;" class=""><span class="mui-icon-extra mui-icon-extra-peoples">&nbsp;&nbsp;考勤管理</span></a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
	<!--右上角弹出菜单-->
	<div id="top2Popover" class="mui-popover" style="display: none; top: 50px; ">
		<div class="mui-popover-arrow"></div>
		<div class="mui-scroll-wrapper " data-scroll="1">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button type="button" class="mui-btn mui-btn-primary" id="selectProjectOkBtn" >&nbsp;&nbsp;确定&nbsp;&nbsp;</button>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button type="button" class="mui-btn mui-btn-info"  id="selectProjectResetBtn" >&nbsp;&nbsp;重置&nbsp;&nbsp;</button> 
			<div class="mui-scroll-wrapper-project mui-scroll "  style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
				<!--  -->
				<div class="mui-table-view" id="selectProjectList">
					
					<!-- <br>
					<br> -->
					<!-- <form class="mui-input-group" id="selectProjectList"> -->
						<!-- <div class="mui-input-row mui-checkbox mui-left">
							<label>checked：false</label>
							<input name="checkbox" value="Item 1" type="checkbox" >
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left">
							<label>checked：true</label>
							<input name="checkbox" value="Item 2" type="checkbox" checked>
						</div>
						<div class="mui-input-row mui-checkbox mui-left mui-disabled">
							<label>disabled checkbox</label>
							<input name="checkbox" type="checkbox" disabled="disabled">
						</div> -->
					<!-- </form> -->
				</div>
			</div>
			<!-- <div class="mui-scrollbar mui-scrollbar-vertical">
				<div class="mui-scrollbar-indicator" style="transition-duration: 0ms; display: none; height: 8px; transform: translate3d(0px, -8px, 0px) translateZ(0px);"></div>
			</div> -->
		</div>
	</div>

<script src="../js/CryptoJS/aes.js"></script>
<script src="../js/CryptoJS/md5.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.pullToRefresh.js"></script> 
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/app.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script>
(function($, doc) { 
	$.init({
		statusBarBackground: '#f7f7f7',
		swipeBack:false, //启用右滑关闭功能
		//该属性禁用了当前页面的返回功能，但是还是有双击退出app的功能
		keyEventBind: {
			backbutton: false  //关闭back按键监听
		}
	}); 
	
	//阻尼系数
	var deceleration = mui.os.ios?0.003:0.0009;
	$('.mui-scroll-wrapper').scroll({
		scrollX: false,
		scrollY: true, //是否竖向滚动
		bounce: true,
		startX: 0,
		startY: 0,
		indicators: true, //是否显示滚动条
		deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	});
	
	var h =document.documentElement.clientHeight;//网页可见区域高
	var w = document.documentElement.clientWidth;//网页可见区域宽  
	var t =(h-mui('.mui-popover')[0].offsetHeight)/2;  
	var l =(w-280)/2;//它的默认宽280  
	$('.mui-popover')[0].style.top= '0px';  
	$('.mui-popover')[0].style.left = '0px';  
	$('.mui-popover')[0].style.width= w + 'px';
	//var t =(h-mui('.mui-popover')[1].offsetHeight)/2;
	//var l =(w-280)/2;//它的默认宽280  
	$('.mui-popover')[1].style.top= '0px';  
	$('.mui-popover')[1].style.left = '0px';  
	$('.mui-popover')[1].style.width= w + 'px';
	//系统消息	
	
	var settings = {};
	var loginInfo = {};
	var searchProjectIds = '';//选择项目查找任务

	$.plusReady(function() { 
		
		//下拉选择项目列表
		var showProjectNamePicker = new mui.PopPicker();
		var showProjectNamePickerButton = document.getElementById('showProjectNamePicker');

		settings = app.getSettings();
		if (settings && settings.loginInfo){
			// loginInfo = JSON.parse(settings.loginInfo);
			loginInfo = settings.loginInfo;
			loadParams.loginToken = loginInfo.loginToken;
			//任务上报权限、设备维护权限
			//获取所属项目列表
			getMeetingDeviceProjectList();
		}
		
		var webviewPage = plus.webview.currentWebview(); 
		var bodyHeight = plus.display.resolutionHeight;
		//plus.nativeUI.alert("页面高度： " + bodyHeight, function(){}, "系统提示: 结果", "确定");
		document.getElementById("item0").style.height = bodyHeight + "px";
		document.getElementById("item1").style.height = bodyHeight + "px"; 
		document.getElementById("item2").style.height = bodyHeight + "px"; 
		document.getElementById("item3").style.height = bodyHeight + "px"; 

	   //选择项目查找任务  var searchProjectIds = null;
	   var selectProjectOkBtn = document.getElementById("selectProjectOkBtn");
	   var selectProjectResetBtn = document.getElementById("selectProjectResetBtn");
	   selectProjectOkBtn.addEventListener('tap', function(event) {
	   	var projectCheckboxObject = document.getElementsByName("checkbox-project");
	   	var checkedValue = '';
	   	var checkedIndex = 0;
	   	if (projectCheckboxObject && projectCheckboxObject.length > 0){
	   		for(var i = 0; i < projectCheckboxObject.length; i++){
	   			var currentCheckboxObject = projectCheckboxObject[i];
	   			if (currentCheckboxObject.checked === true){
	   				if (checkedIndex > 0){
	   					checkedValue += ',' + currentCheckboxObject.value;
	   				}else{
	   					checkedValue += currentCheckboxObject.value;
	   				}
	   				checkedIndex++;
	   			}
	   		};
	   		searchProjectIds = checkedValue;
	   	}
	   	mui('#top2Popover').popover('hide');
	   }, false);
	   selectProjectResetBtn.addEventListener('tap', function(event) {
	   	var projectCheckboxObject = document.getElementsByName("checkbox-project");
	   	var projectCheckboxObject = document.getElementsByName("checkbox-project");
	   	var checkedValue = null;
	   	var checkedIndex = 0;
	   	if (projectCheckboxObject && projectCheckboxObject.length > 0){
	   		for(var i = 0; i < projectCheckboxObject.length; i++){
	   			var currentCheckboxObject = projectCheckboxObject[i];
	   			if (currentCheckboxObject.checked === true){
	   				currentCheckboxObject.checked = false;
	   			}
	   		};
	   		searchProjectIds = '';
	   	}
	   	mui('#top2Popover').popover('hide');
	   }, false);
	   
		
		//下拉选择项目列表
		showProjectNamePickerButton.addEventListener('tap', function(event) {
			showProjectNamePicker.show(function(items) {
				var selectItem = items[0];
				showProjectNamePickerButton.innerHTML = selectItem.text;
				document.getElementById('addProjectName').value = selectItem.text;	
			});
		}, false);

		
		//获取所属项目列表
		function getMeetingDeviceProjectList(){
			var tokenData = localToken;
			var encryptedLoginId = app.GetEncryptData(loginInfo.loginId + "", tokenData, tokenData);
			var dataUrl = "loginToken" + encryptedLoginId + "csrftoken" + tokenData;
			var signData = app.GetSignData(dataUrl);
			var postData = {
				loginToken: encryptedLoginId,
				sign: signData
			}
			app.ajaxJson(
				'/faultInfo/projectList',
				postData,
				function(resultObject){
					//请求成功处理
					if (resultObject.code == 1000){
						var dataList = resultObject.data;
						 // console.log("获取运维人员列表, dataList: " + JSON.stringify(dataList));
						var selectProjectList = document.getElementById("selectProjectList"); 
						if (dataList && dataList.length > 0){
							var projectNamePickerData = new Array();
							var selectProjectListData = "";
							for (var i = 0 ; i < dataList.length ; i++){
								var projectId = dataList[i].value;
								var projectName = dataList[i].label;
								projectNamePickerData.push({
									value: projectId,
									text: projectName
								});
								selectProjectListData += '<div class="mui-input-row mui-checkbox mui-left">';
								selectProjectListData += '<label>'+ projectName +'</label>';
								selectProjectListData += '<input name="checkbox-project" value="' + projectId + '" type="checkbox" >';
								selectProjectListData += '</div>';
							}	
							showProjectNamePicker.setData(projectNamePickerData);
							
							selectProjectList.innerHTML = selectProjectListData;
							
							mui(".mui-scroll-wrapper-project.mui-scroll").scroll();
							setTimeout(function(){
								// mui('.mui-scroll-wrapper-project').scroll().reLayout();
								// mui('.mui-scroll-wrapper-project').scroll().scrollTo(0,0,100);
								// mui('.mui-scroll-wrapper-project').scroll().scrollToBottom(100);
								//滚动到顶端
								// mui('#top2Popover').scroll().scrollTo(0,1000,10);
							},300)
						}else{
							showProjectNamePicker.setData([]);
						}
					
					}else if(resultObject.code == 1003){
						//登录超时，跳转到登录页面
						plus.nativeUI.alert(resultObject.msg, function(){
							app.clearAllCache();
							setTimeout(function(){
								app.restartApp();
							},1000);
						}, "系统提示", "确定");
					}
					else{
						plus.nativeUI.alert(resultObject.msg, function(){}, "系统提示", "确定");
						return;
					}
				},
				function(errorMsg){
					//请求失败处理
					plus.nativeUI.alert(errorMsg, function(){}, "系统提示", "确定");
				},
				""
			);
		}
		
	});

	//登录过期，跳转到登录页面
	//跳转登录页面
	var toLogin = function() {
		$.openWindow({
			id: 'login',
			url: '../login.html?v='+ new Date().getMilliseconds(),
			createNew: false,
			show: {
				aniShow: 'pop-in'
			},
			styles: {
				popGesture: 'hide'
			},
			waiting: {
				autoShow: true
			}
		});
	};
	 
	 //登录过期，跳转到登录页面
	 //跳转登录页面
	 var toLogin = function() {
	 	$.openWindow({
	 		id: 'login',
	 		url: '../login.html?v='+ new Date().getMilliseconds(),
	 		createNew: false,
	 		show: {
	 			aniShow: 'pop-in'
	 		},
	 		styles: {
	 			popGesture: 'hide'
	 		},
	 		waiting: {
	 			autoShow: true
	 		}
	 	});
	 };
	 
	 mui.previewImage();
}(mui, document));
</script>
</body>
</html>

关键性的代码：
html部分：
<a class="mui-action-menu mui-icon mui-icon-search mui-pull-right" style="color: #FFFFFF;margin-right: 0px;" href="#top2Popover"  id="gotoFaultInfoSearchBtn">
         </a>
<div id="top2Popover" class="mui-popover" style="display: none; top: 50px; ">相关内容
css部分：#top2Popover相关样式
js部分：//获取所属项目列表 getMeetingDeviceProjectList(); 滚动代码：mui(".mui-scroll-wrapper-project.mui-scroll").scroll();

最终效果图（顶部查询按钮触发弹出层、按钮固定、列表滚动【列表右下角出现滚动条】）：

zgphacker2010
关注
专栏目录
[MUI专题] 区域滚动
算法与编程之美
08-05 508
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。前言MUI提供了区域滚动的组件，使用时遵循DOM结构就可以。若是需要使用区域滚动的组件，就需要初...
使用Vue 与 mui slider scroll框架遇到的问题记录
qq_35500233的博客
05-07 877
使用mui框架作为移动端开发的前端框架，使用vue作为前端与后端数据对接的框架，在使用过程中遇到了一些问题现整理如下：框架的版本号：Mui v3.7.2 Vue.js v2.6.10 需求描述：如下图所示，可以实现左右滑动切换题目，同时点击下面的上一题下一题也可以进行题目的切换，点击对应的题号可以跳转到对应题号的界面 第一种实现方式： 使用mui 的slider 的轮播这个组件 HTM...
MUI-scroll滚动，重新定位滚动位置
LzzMandy的博客
01-17 4782
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')
uniapp实现区域滚动、下拉刷新、上滑滚动加载更多
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-22 4017
scroll-view自定义滚动区域，通过css样式，让滚动区域自适应整个屏幕剩余空间。min-height:0;设置为0
mui 区域滚动
cery_csdn的博客
06-10 5279
我在实际使用中，这样代码虽然能用，但是有些地方他还没有讲明白，如果贸然添加这样的一个区块代码，不一定能实现滚动效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
MUI-区域滚动mScroll
LzzMandy的博客
01-07 1177
区域滚动的结构 &lt;div class="mui-scroll-wrapper"&gt; &lt;div class="mui-scroll"&gt; &lt;!--这里放置真实显示的DOM内容--&gt; &lt;/div&gt; &lt;/div&gt; . mui-scroll-wrapper的默认样式如下： .mui-scroll-wrapper
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区域滚动
weixin_30362801的博客
09-04 126
1.引入：mui.cssmui.min.cssmui.js2、代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-wi...
mui滚动条 的实现源代码
11-15
3. **区域滚动到底部显示不完全**："Mui 区域滚动scroll底部显示不完全的问题"表明在滚动到内容底部时，可能存在部分内容没有完全显示。这可能是由于布局、定位或者内边距问题导致的，需要检查相关CSS属性并调整。 ...
mui滚动事件中，自定义横向滑动失效
xue080414的博客
01-08 1247
查了很多资料，也没有找到解决办法，最后自己给滑动区域写一个拖拽事件                            //开始拖动                             var cantrans=change=oldtrans=newtrans=0;                             mui('.attentionDiv').on('dragstart...
mui选项卡切换和下拉刷新加载数据列表代码.zip
07-11
这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui....
MUI Scroll插件的使用详解
12-02
http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1：如果在vuejs中使用，那么需要配合mui.ready(function(){}) 才能找到dom对象，具体demo为： //www.jb51.net/article/111085.htm 神坑2：scrollTo每次移动的距离，是相对于当前打距离的移动的，而不是移动到绝对的距离。 scroll(区域滚动) 在App开发中，div区域滚动的需求是普遍存在的，但系统默认实现又有如下问题： Android平台4.0以下不支持div滚动 Android平台4.0以上支持div滚动，但不显示滚动条 弹出层的
mui中使用 mui-popover遇到的问题及解决方法
qq_35500233的博客
05-16 5698
我的项目整体是基于mui框架实现的，同时使用了vue框架来给界面绑定数据。 具体的界面如下 点击页面的按钮，弹出下面这个界面。 我的html代码如下： <div id="cardContent" class="card-content mui-popover mui-popover-bottom mui-popover-action" data-disable-auto-close="tr...
scroll 区域滚动
weixin_30455661的博客
01-28 178
网页内都有快速滚动和回弹的效果： overflow: scroll; -webkit-overflow-scrolling: touch; 实际上，Safari用了原生控件来实现，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。 使用问题1： 有时候滑动完失灵，需要把滑动过的元素displa...
mui之 scroll采坑
不想起床
12-30 1483
scroll：区域滚动 采坑一： 单纯的复制样式和结构 <div id="slider" class="mui-slider"> <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-cont...
mui区域滚动条
weixin_33909059的博客
05-03 932
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;%@ page contentType="text/html;charset=utf-8"%&gt;&lt;%@ include file...
mui 选项卡tab页实现区域滚动，Ajax函数渲染数据（选项卡+scroll滚动+折叠面板）
shanxiu_的博客
03-03 1070
效果图预览 一、HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>news</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
iscroll区域滚动
mcYang0929的博客
11-19 485
最近需要做一个给用户投票的页面，投票结果可以查看点击，展示形式是以一种弹窗的形式，但是由于选手数量较多，所以选手结果需要区域滑动来展示。 由于是活动页面，页面形式较简单，所以用jq + webpack + es6进行编写此项目 区域滑动相关内容则用iscroll插件 HTML &lt;div id="wrapper"&gt; &lt;ul id="scroller" class="vo...
MUI开发APP，scroll组件，运用到区域滚动
weixin_34372728的博客
04-12 282
        最近在开发APP的过程中，遇到一个问题，就是内容有一个固定的头部和底部。         头部就是我们常用的header了，底部的话，就放置一个button，用来提交页面数据或者进入下一个页面等，效果如下： 这里面需要注意到的地方就是，头和底是固定的，但是中间的部分呢，由于要设置24小时的内容，从图中可以看到，只显示了03:00~13:00的内容，剩下的内容没显示出来。...
微信实战：HTML5移动端混合应用开发-MUI框架视频教程
"2018mui教程 mui实战视频教程 web移动端开发教程+源码" 本教程详细介绍了如何使用MUI框架进行HTML5移动端混合应用的开发，特别针对微信实战项目进行教学。MUI是一个轻量级的前端框架，专为移动设备设计，能够帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值