解決使用MUI時mui-slider-item高度不一致的自適應問題

今天在寫一個MUI項目的時候，發現使用slider時，最高的mui-slider-item會把mui-slider-group撐開，而其餘的mui-slider-item下面會出現很大的空白。

百度了很久也沒有找到解決方案，最後本身想出了一種辦法，但願起到拋磚引玉的做用。

解決思路：

 

 用一個新的container把mui-slider-item嵌套在裏面,高度設置爲當前設備的高度，而後給container設置overflow:scroll。

這樣就不會撐開mui-silder-group的高度，同時裏面的內容也能夠看到了。

一個極其樸素的demo在下面

<div id="slider" class="mui-slider">
		        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		            <a class="mui-control-item" href="#item1">aaa</a>
			    <a class="mui-control-item" href="#item2">bbb</a>
		            <a class="mui-control-item" href="#item3">ccc</a>
		        </div>
		        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
		        <div class="mui-slider-group">
		            <div id="item1" class="mui-slider-item mui-control-content mui-active">
				<div class="container" style="overflow: scroll;">
				　　1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
				</div>
		            </div>
				<div id="item2" class="mui-slider-item mui-control-content mui-active">
				　　<div class="container" style="overflow: scroll;">
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>3<br/>1111111<br/>
				　　</div>
				</div>
		            　　<div id="item3" class="mui-slider-item mui-control-content">
				　　<div class="container" style="overflow: scroll;">
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
				　　</div>
		            </div>
		        </div>
		    </div>
		<script type="text/javascript">
			mui.init();
			var h = window.innerHeight;
			h = h-40 ;
			console.log(h);
			var item = document.getElementsByClassName('container');
			for(i=0;i<item.length;i++){
				item[i].style.height = h + 'px';
			}
		</script>

　

 

原文出處：https://www.cnblogs.com/palover-0416/p/11640169.html