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

最近做一个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>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

Bootstrap Table表格分页的使用及分页数据(Excel)导出

1:引入Bootstrap Table表格插件相关链接:这里直接拿来用就可以了,如果要下载到本地,可以自行去官网下载。

87130
来自专栏一丘一壑

用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。今天突然想放一个进度条...

22540
来自专栏清晨我上码

第二十节 netty源码分析之 reactor中的EventLoop01

(如果使用到的是 NIO, 那么通常是 NioEventLoopGroup), 那么这个 NioEventLoopGroup 在 Netty 中到底扮演着什么角...

11420
来自专栏开发实战

swagger-bootstrap-ui的使用说明

有些朋友在使用这个jar包的时候会出现接口出不来的情况,或者只出现ui默认的几个接口,项目的api接口没有出来,

37830
来自专栏前端实习日记

JS:用rem来做响应式开发

电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是...

25010
来自专栏运维经验分享

linux tomcat 无法关闭 :8005端口未启动

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25283709/article/details/550...

26920
来自专栏颇忒脱的技术博客

ClassLoader(一)- 介绍

讲到bootstrap class loader就不得不说三种常见的ClassLoader实现。

8730
来自专栏A周立SpringCloud

聊聊 SpringCloud 中的父子容器

在引入 SpringCloud 的项目中会多次创建 Spring 容器,本篇从源码角度深入分析具体哪些点会创建 Spring 容器,以及这些容器之间的区别与联系...

34120
来自专栏运维经验分享

tomcat shutdown.sh结束不了,Could not contact localhost:8005

使用./shutdown.sh关闭Tomcat,有时会关闭成功,有时会出现关闭错误;

22940
来自专栏蓝天

编译boost,去掉不使用的组件

说明:下面内容仅针对Linux环境(boost官网为:http://www.boost.org/,可从这里下载它的源代码包,这里要求下载.tar.gz包,而...

17930

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励