自已动手调整mui的picker选择器的弹出层高度

奋斗吧

擅长邻域：未填写

标签：自已动手调整mui的picker选择器的弹出层高度 JavaScript博客 51CTO博客

2023-07-23 18:24:17 148浏览

自已动手调整mui的picker选择器的弹出层高度，自已动手调整mui的picker选择器的弹出层高度在使用mui的picker选择器的时发现这个弹出层的高度是固定，想调高一点，比如占高度的80%，找了半天没有找到，这样只能自已尝试动手去改一下代码看看能否实现了

自已动手调整mui的picker选择器的弹出层高度

在使用mui的picker选择器的时发现这个弹出层的高度是固定，想调高一点，比如占高度的80%，找了半天没有找到，这样只能自已尝试动手去改一下代码看看能否实现了

达到效果图:

自已动手调整mui的picker选择器的弹出层高度_css

这个初始样式好像固定了只有200px

自已动手调整mui的picker选择器的弹出层高度_3d_02

下载mui的源码，找到例子, 打开可以看到引用了mui.picker.css及mui.poppicker.css，应该调整下这两个样式表文件就能实现了

自已动手调整mui的picker选择器的弹出层高度_3d_03

在mui.poppicker.css里找到了样式.mui-poppicker-body 有一个高度的设置，改为想要的 height:80%,测试验证一下，但并没有达我们想要的效果，反而好像出bug了一样，应该是没调整对吧

自已动手调整mui的picker选择器的弹出层高度_3d_04

自已动手调整mui的picker选择器的弹出层高度_css_05

打开调试，查看元素，最顶层元素样式为mui-poppicker，应该是这个样式有问题吧

自已动手调整mui的picker选择器的弹出层高度_css_06

原始的mui-poppicker样式为

.mui-poppicker {
	position: fixed;
	left: 0px;
	width: 100%;
	z-index: 999;
	background-color: #eee;
	border-top: solid 1px #ccc;
	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
	-webkit-transition: .3s;
	bottom: 0px;
	-webkit-transform: translateY(300px);
}

增加一个height:80%;看看效果吧。还是没有达想要的效果,下方有留白

.mui-poppicker {
	position: fixed;
	left: 0px;
	width: 100%;
  height:80%;
	z-index: 999;
	background-color: #eee;
	border-top: solid 1px #ccc;
	box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
	-webkit-transition: .3s;
	bottom: 0px;
	-webkit-transform: translateY(300px);
}

自已动手调整mui的picker选择器的弹出层高度_选择器_07

将mui-poppicker-body 的高度调为100%达到预期的效果

.mui-poppicker-body {
position: relative;
width: 100%;
/height: 200px;/
height: 100%;
border-top: solid 1px #ddd;
/-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;/
}

自已动手调整mui的picker选择器的弹出层高度_3d_08