今天在写一个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>