今天在使用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显示后无法获取正确的宽度和高度的更多相关文章

  1. Android 开发 Activity里获取View的宽度和高度 转载

    原文地址:https://blog.csdn.net/chenbaige/article/details/77991594 前言: 可能很多情况下,我们都会有在activity中获取view 的尺寸大 ...

  2. react-native 获取组件的宽度和高度

    react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对 ...

  3. js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度

    html部分 <div class="form-group col-md-12"> <label class="col-md-2 text-right& ...

  4. android之获取屏幕的宽度和高度

    获取屏幕的宽度和高度: 方法一: //获取屏幕的宽度 public static int getScreenWidth(Context context) { WindowManager manager ...

  5. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  6. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

  7. 如何在onCreate方法中获取视图的宽度和高度

    你可以通过视图的getWidth()和getHeight()来获取视图的宽度和高度. 但是,可能会让你失望的是,如果你直接在onCreate方法内调用这两个函数,你会的到0. 为什么呢? 这是因为,当 ...

  8. php获取设备的宽度和高度

    php获取设备的宽度和高度 如果前台没有传输当前请求的宽度和高度,我们有时候需要用php借助javascript获取屏幕的宽和高,以控制现实的样式. 代码如下: <?php /* * 获取设备宽 ...

  9. Java 获取屏幕的宽度和高度

    获取屏幕的宽度和高度 1 import java.awt.Dimension; 2 import java.awt.Toolkit; 3 4 public class Main { 5 6 publi ...

随机推荐

  1. 【Linux】X window与文本模式的切换

    Linux默认的情况下会提供六个Terminal来让使用者登陆,切换的方式为:[Ctrl] + [Alt] + [F1]~[F6]的组合按钮.那这六个终端接口如何命名呢,系统会将[F1] ~ [F6] ...

  2. pylot 学习笔记-使用

    Console and Blocking Mode - Command Line Options: usage: run.py [options] args -a, --agents=NUM_AGEN ...

  3. PSQL_标准API和Interface基本的用法和比较(概念)

    2014-01-05 Created By BaoXinjian

  4. Python 列表 append() 方法

    描述 Python 列表 append() 方法用于在列表末尾追加新的对象. 语法 append() 方法语法: L.append(obj) 参数 obj -- 追加到列表末尾的对象. 返回值 该方法 ...

  5. Python sqrt() 函数

    描述 sqrt() 方法返回数字x的平方根. 语法 以下是 sqrt() 方法的语法: import math math.sqrt( x ) 注意:sqrt()是不能直接访问的,需要导入 math 模 ...

  6. APP三种开发模式

    目前主流应用程序大体分为三种:Web App(网页应用).Hybrid Ap(混合应用)p. Native App(原生应用). nativeapp是一个原生程序,一般运行在机器操作系统上,有很强的交 ...

  7. INFINITY的一个坑

    float a=INFINITY; if(a==INFINITY){ cout<<"a is inf"<<endl; }else{ cout<< ...

  8. 如何安装rockmongo(gui for mongodb)

    1.下载rockmongo 下载地址: http://rockmongo.com/downloads 将下载下来的压缩包rockmongo-1.1.5.zip解压到web 发布目录(我这里使用的是ap ...

  9. CSDN日报20170403 ——《该不该离职?它说了算!》

    [程序人生]该不该离职?它说了算! 作者:安晓辉 我在加油站工作,月薪扣除五险一金2000多.工作时间长,上班48小时歇息8小时. 今年单位改革把我们都外包出去了,承包人对我各种苛刻要求.有心辞职去干 ...

  10. [svc][op]vim自动添加注释

    我想了下,要做好一件事, 1,首先喜欢它最才有动机去了解它 2,道听途说about那东西的,会去了解并去玩转 3,兴趣需要培养 一 添加vim头部信息. 系统:C67 追加以下代码到 /etc/vim ...