最近作一個web頁面,但願在手機上能滑動切換頁面,第一次這種要求,在網上找到了一個插件swiper,swiper2能夠在電腦和手機上使用,因而選擇這個插件,在使用這個插件的過程也遇到了不少問題,如滾動條很長,體驗很差,最後採用js來控制高度,在此頁面中也採用了bootstrap-table插件來固定表頭,採用js動態的設置高度,當頁面高度小時,有滾動條,頁面高時就徹底展現,爲了體驗好,當滾動到第一個頁面底部時,滑動切換第二個頁面的頂部,須要scrollTop實現javascript
頁面結構css
<body class="container" style=""> <div class="swiper-pages swiper-container" style=""> <div class="list-unstyled swiper-wrapper" > <div class="swiper-slide" style=""> <div class="content-slide"> 頁面1 </div> </div> <div class="swiper-slide" style=""> <div class="content-slide"> 頁面2 </div> </div> <div class="swiper-slide" style=""> <div class="content-slide"> 頁面3 </div> </div> </div> </div> </body>
swiper主要用到的樣式html
<style type="text/css"> .swiper-container{position:relative;} .swiper-slide{width:100%;} .pagination { position: absolute; z-index: 20; top: 35px; width: 100%; text-align: center; } .swiper-pagination-switch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #ecf0f0; margin: 0 10px; opacity: 0.8; border: 1px solid #999; cursor: pointer; } .swiper-active-switch { background: #ee8e27; } </style>
swiper主要用到jsjava
<script type="text/javascript"> var mySwiper = new Swiper('.swiper-container', { loop: true, pagination: '.pagination', paginationClickable: true, onSlideChangeStart: function(swiper) { //$( '.swiper-container' ).scrollTop(0);這樣是直接到頂部,每每會出現閃屏, $('.swiper-container').animate({ scrollTop: 0 }, 10); //動畫慢慢過渡到頂部 } }); $('.swiper-container').css({ "height": $(window).height(), "overflow-y": "auto" }); $('.swiper-wrapper').css({ "height": $(window).height() }); $('.swiper-slide').css({ "height": $(window).height() }) //頁面中含有echart圖表,須要再調用swiper插件後再init 和setoption圖表,不然圖表在頁面切換時不顯示 var myLineChart = echarts.init(document.getElementById('linechart1'), theme); myLineChart.setOption(option2); ObjectResize(myLineChart.resize); </script>
bootstrap-table插件用到js,動態控制頁面的高度web
<script type="text/javascript"> $(document).ready(function() { $('#qiliangqifei').bootstrapTable({ height: $('.qiliangqifei-tab').outerHeight() + 10 }); if (($(window).height() - 330) > ($('.fixed-table-container').outerHeight())) { $('.fixed-table-container').css({ "height": $('.fixed-table-container').outerHeight() }); } else { //alert($( '.fixed-table-container').outerHeight()); $('.fixed-table-container').css({ "height": $(window).height() - 330 }); }; }); </script>