webAPP頁面切換之滑動-swiper2(切換頁面默認顯示頂部)

時間 2019-11-17

標籤 webapp 頁面切換滑動 swiper2 swiper 默認顯示頂部欄目無線简体版

原文原文鏈接

最近作一個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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。