webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)

最新推荐文章于 2022-12-16 15:45:44 发布

weixin_33829657

最新推荐文章于 2022-12-16 15:45:44 发布

阅读量1.2k

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/761327

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近做一个web页面，希望在手机上能滑动切换页面，第一次这种要求，在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用，于是选择这个插件，在使用这个插件的过程也遇到了很多问题，如滚动条很长，体验不好，最后采用js来控制高度，在此页面中也采用了bootstrap-table插件来固定表头，采用js动态的设置高度，当页面高度小时，有滚动条，页面高时就完全展示，为了体验好，当滚动到第一个页面底部时，滑动切换第二个页面的顶部，需要scrollTop实现

页面结构

<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主要用到的样式

<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主要用到js

<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，动态控制页面的高度

<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>

转载于:https://my.oschina.net/u/2612473/blog/761327