隐藏的Swiper显示后无法获取正确的宽度和高度
今天在使用swiper的时候,元素默认是显示的时候没毛病,但是默认是隐藏的状态,再显示的时候发现滑动的时候宽度计算有误,如下图所示:
正确的显示如下:

隐藏的元素再次显示如下:
宽度计算有误

解决方案:
var mySwiper = myApp.swiper('.guest-wrapper',{
freeMode : true,
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true//修改swiper的父元素时,自动初始化swiper
});
只需加上后面两行即可。
参数具体含义可看官网说明:http://www.swiper.com.cn/api/Observer/2015/0308/218.html
隐藏的Swiper显示后无法获取正确的宽度和高度的更多相关文章
- Android 开发 Activity里获取View的宽度和高度 转载
原文地址:https://blog.csdn.net/chenbaige/article/details/77991594 前言: 可能很多情况下,我们都会有在activity中获取view 的尺寸大 ...
- react-native 获取组件的宽度和高度
react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对 ...
- js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度
html部分 <div class="form-group col-md-12"> <label class="col-md-2 text-right& ...
- android之获取屏幕的宽度和高度
获取屏幕的宽度和高度: 方法一: //获取屏幕的宽度 public static int getScreenWidth(Context context) { WindowManager manager ...
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...
- 如何在onCreate方法中获取视图的宽度和高度
你可以通过视图的getWidth()和getHeight()来获取视图的宽度和高度. 但是,可能会让你失望的是,如果你直接在onCreate方法内调用这两个函数,你会的到0. 为什么呢? 这是因为,当 ...
- php获取设备的宽度和高度
php获取设备的宽度和高度 如果前台没有传输当前请求的宽度和高度,我们有时候需要用php借助javascript获取屏幕的宽和高,以控制现实的样式. 代码如下: <?php /* * 获取设备宽 ...
- Java 获取屏幕的宽度和高度
获取屏幕的宽度和高度 1 import java.awt.Dimension; 2 import java.awt.Toolkit; 3 4 public class Main { 5 6 publi ...
随机推荐
- iOS - App 应用
1.Xcode 项目属性 Product Name 软件名称.产品名称.项目名称 Organization Name 公司名称.组织名称 Organization Identifier 公司的唯一标识 ...
- Kafka中Topic级别配置
一.Kafka中topic级别配置 1.Topic级别配置 配置topic级别参数时,相同(参数)属性topic级别会覆盖全局的,否则默认为全局配置属性值. 创建topic参数可以设置一个或多个--c ...
- LevelDB场景分析4--BackgroundCompaction
1.DBImpl::Open uint64_t new_log_number = impl->versions_->NewFileNumber(); WritableF ...
- explore your hadoop data and get real-time results
deep api integration makes getting value from your big data easy 深度api集成使你大数据訪问更加easy Elasticsearch ...
- Java调用Linux命令(cd的处理)
一.Java调用Linux系统的命令非常简单 这是一个非常常用的调用方法示例: public String executeLinuxCmd(String cmd) { System.out.print ...
- Ext.net控件调整后台事件、方法论
一.以ext.net的button为例调用后台事件: 前台代码: <ext:Button ID="Button1" runat="server" Text ...
- java各种数据类型之间的转换
1如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseIn ...
- k8s的容器监测探针
大部分的应用程序我们在部署的时候都会适当的添加监控,对于运行载体容器则更应该如此.kubernetes提供了 liveness probes来检查我们的应用程序.它是由节点上的kubelet定期执行的 ...
- [Python]南邮OJ代码备份爬虫
之前看过Python学习的经验,说以project为导向学习. 自己分析了一下,一般接触Python的都有一定的其它语言基础,对于程序设计的基本逻辑,语法都有一个大概的了解.而Python这样的脚本语 ...
- Java并发:volatile内存可见性和指令重排
volatile两大作用 1.保证内存可见性 2.防止指令重排 此外需注意volatile并不保证操作的原子性. (一)内存可见性 1 概念 JVM内存模型:主内存和线程独立的工作内存 Java内存模 ...