swiper 移动端的实际应用--业绩报告--高度适配

kingrome2009

于 2017-12-27 15:38:19 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：响应式网站文章标签：移动

本文链接：https://blog.youkuaiyun.com/kingrome2017/article/details/78912937

响应式网站专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在移动端利用Swiper3实现业绩报告的高度适配。通过结合CSS3、TweenMax和animate.css等工具，创建生动的微场景。正确显示方式、核心JS和重点高度适配的CSS代码被详细阐述，避免出现滚动条问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目默认使用swiper3

使用Swiper再配合一些你喜欢的小动画，你的图片立即变成活灵活现的微场景、微海报。

CSS3、TweenMax、animate.css都具有轻量或易于使用的特点，或使用我们提供的Swiper Animate小插件。

http://3.swiper.com.cn/usage/index.html

正确的显示方式

这里写图片描述

核心js

页面html官方文档有提供

var mySwiper = new Swiper('.swiper-container', {
                    direction: 'vertical',
                    onTap: function(swiper) {
                        mySwiper.slideNext();
                    }
                });

这里写图片描述

重点高度适配

如果没有核心CSS代码会出现下面的这种情况，高度不能适配，会出现滚动条

这里写图片描述

核心CSS代码

html,
body {
  width: 100%;
  height: 100%;
}