隐藏的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 - CFNetwork 的使用
1.CFNetwork CFNetwork 是基于 OS 层 BSDSocket 封装(纯 C),用于网络通信,早期的网络请求框架 ASIHTTPRequest 就是基于 CFNetwork 进行的封 ...
- Form_Form Builder的基本语法(概念)
2014-05-21 Created By BaoXinjian
- Java实现文件自动打包成zip并下载的代码
import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java. ...
- mysql-cluster 环境安装&配置
一.mysql-cluster 的介绍: 1.说心里话mysql-cluster这货性能上是不行的,之前一个同事测试了来的结果是8个主机组成的mysql-cluster性能 上搞不过一个单机的mysq ...
- JAVA:认识多线程
曾经古老的DOS操作系统是单任务的.还没有线程的概念,系统在每次仅仅能做一件事情.比方你在copy东西的时候不能rename文件名称. 为了提高系统的利用效率,採用批处理来批量运行任务. 如今的操作系 ...
- 图解TCP/IP笔记-网络基础知识
1.计算机网络发展的7个阶段1)批处理服务器一次只能处理一批程序指令2)分时服务器可以分时为多台客户端服务3)计算机之间通信计算机之间由通信线路连接,互相通信4)计算机网络的产生通过分组交换技术,在不 ...
- Oracle PLSQL Demo - 24.分隔字符串function
-- refer: -- http://www.cnblogs.com/gnielee/archive/2009/09/09/1563154.html -- http://www.cnblogs.co ...
- Spark大师之路:广播变量(Broadcast)源码分析
概述 最近工作上忙死了……广播变量这一块其实早就看过了,一直没有贴出来. 本文基于Spark 1.0源码分析,主要探讨广播变量的初始化.创建.读取以及清除. 类关系 BroadcastManager类 ...
- 去除img、video之间默认间隔的几种方法
img,video{ /*第1种方式*/ border: ; vertical-align: bottom; /*第2种方式*/ outline-width:0px; vertical-align:t ...
- Android开发日记(四)
在服务器端数据库新建一个表ad 在DataInfo.edxm模型中点击从数据库更新模型,发布. 就新建了一个实体ad 然后新建cs文件 using System; using System.Colle ...