首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)

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

作者头像
tianyawhl
发布于 2019-04-04 08:31:47
发布于 2019-04-04 08:31:47
2.4K00
代码可运行
举报
文章被收录于专栏:前端之攻略前端之攻略
运行总次数:0
代码可运行

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

页面结构

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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主要用到的样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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,动态控制页面的高度

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/10/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Swiper开篇
 swiper是一款轻量级以及免费的移动设备触控滑块的js框架,主要运用于移动端的操作,但也可以用于pc端页面效果制作,完全的开源免费,
用户3159471
2018/09/13
1.9K0
Swiper滑动Html5手机浏览器自适应
手机网页能通过window.screen.height, width获取屏幕分辨率,于是能够通过分辨率比率来计算高度。
全栈程序员站长
2022/07/08
1.6K0
Swiper滑动Html5手机浏览器自适应
移动端弹框后禁用页面滑动
在web开发中,有时候我们需要实现在页面上点击某个按钮弹出窗口,并禁用页面滑动或滚动的需求。以下是我本人的做法,望大家多多提出意见或建议。 直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端弹框禁止背景滑动</title> <link rel="stylesheet" href="test.css"> <link rel="stylesheet" href="../l
用户1174387
2018/01/17
2.5K0
移动端弹框后禁用页面滑动
使用 swiper 轮播插件遇到的问题及解决方法
我只是记录一下我在使用过程中遇到的几个属性,详细API大家可以直接去官网查看:Swiper4.x使用方法
德顺
2019/11/13
4.8K0
Swiper如何快速上手?
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。
Javanx
2019/09/04
7990
Swiper实现全屏视觉差轮播
Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性
用户3159471
2018/09/13
3.7K0
swiper实现图片轮播功能
swiper是一个相当强大的图片展示插件,下面我来介绍一下swiper的简单图片轮播功能。一般情况下我们所说的图片轮播就是在一个区域内有几张图片循环展示,有的可以滑动图片观看下一张图,有的可以点击图下方的小点来选择哪个图,也有点击两侧的左右按钮来切换图片展示。我们先来看一下如何实现
OECOM
2020/07/01
7.1K0
Swiper插件使用方法
Swiper插件的简单使用 Swiper插件是用来写轮播图的插件,十分简洁方便。可以直接去Swiper官网下载并点击开始使用Swiper按钮查看使用方法,这里只介绍简单引用的方法。 本文所写内容在官网均有详细介绍。 一、下载并引入文件 可以直接登录官网下载,如果安装了Nodejs环境也可以打开编译器终端利用npm i swiper下载 将文件放到你喜欢的路径,并分别引入css和js文件 <!DOCTYPE html> <html> <head> ... <link rel="styl
江一铭
2022/06/17
1.7K0
Swiper插件使用方法
D3结合Swiper实现一个选中动画
最近接到一个项目,其中有一个小需求我觉得可以稍微沉淀一下,首先是d3.js的简单应用,还有就是swiper的调试费了一定的时间
玖柒的小窝
2021/11/02
9060
Swiper做轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten
明知山
2020/09/03
1.4K0
3D展示图片轮播效果
相信大家都见过图片轮播的效果,现在很多效果都是有几张图片在页面上来回播放,或者需要用户去点击播放。但是在这个页面美观度要求很高的今天,我们需要更有新意的图片轮播效果来展示我们的产品,达到吸引用户眼球的目的。下面我来介绍一下3D展示图片轮播效果。
OECOM
2020/07/02
2.8K0
get几个小技能:轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏 用到了许多有趣的东西们今天分享一下。
不愿意做鱼的小鲸鱼
2022/09/24
1.9K0
get几个小技能:轮播图插件、进度条插件、筛选过滤插件
AntUI滑块Sliders
浅色分页器 <style>.demo-swiper.swiper-container {    height: 150px;    overflow: hidden;    margin: 0 10px;    padding-top: 10px; }.demo-swiper .swiper-slide {    line-height: 140px;    text-align: center;    background: #108EE9;    color: #ffffff; }</style><di
爱知汇
2020/10/10
2.5K2
Vue路由详解(路由基础,路由轮播,路由传参,通配符路由)
一. Vue路由基础知识点: 1.router-view: 类似angular里的插座,用于承载路由的切换组件 2.router-link: 类似angular里的routerLink,区别是:vue的router-link是一个组件,直接充当a标签使用.但是在最后渲染时,vue还是会将其渲染成a标签 3.routes: 数组,用来做路由信息的配置 4.router: 对象,通过该对象的方法实现路由的跳转,例如按钮点击实现跳转 5.route: 类似angular里的ActiveRoute,用来获取路由传参的值
生南星
2019/07/22
3.4K0
基于swiper的手机端上下和左右滑动效果
上一篇文章中我向大家介绍了基于swiper的手机端上下和左右滑动效果,但有时候在上下滑动的中间需要有左右滑动的效果,那么我就再来给大家介绍一种基于swiper的手机端上下滑动的同时还能够左右滑动效果,来看一下代码。
OECOM
2020/07/01
3.7K0
移动端滑动切换
预览 scss样式 @import 'common';//初始样式,可以不需要(这是我项目需要) /*body默认铺满整个屏幕*/ body{ position: absolute;
潇洒哥和黑大帅
2018/10/23
2.1K0
移动端滑动切换
『教程』首页及文章页滚动广告栏
因为之前在很多网站上都能看到广告,虽然但是,这对很多博主来说也是一笔额外的收入,我一直是入不敷出!
云计算小黑
2022/12/28
1.1K0
『教程』首页及文章页滚动广告栏
swiper.animate实现轮播展示动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://cdn.bootc
明知山
2020/09/03
1.7K0
react中使用swiper
最近的react项目需要使用轮播图,自然而然的就想到了swiper,一直想通过npm安装的方式来使用,但是网上找了很多,资料很少,于是就暂时通过在index.html里直接引用swiper的js和css文件的方式来加载,下面来说一下具体的步骤和使用方法。
OECOM
2020/07/01
2.1K0
AngularJS 中使用Swiper制作滚动图不能滑动
Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。 ---- 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用。 <div class="swiper-wrapper" > <!-- =======循环部分======= --> <div cla
冷冷
2018/02/08
2K0
相关推荐
Swiper开篇
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验