今天在使用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. RabbitMQ概念及环境搭建(四)RabbitMQ High Availability

    #################################################### RabbitMQ High Availability #################### ...

  2. C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  3. VS报:"dll标记为系统必备组件,必须对其进行强签名"错误

    问题: VS生成程序时,报“要将程序集“XX.dll”标记为系统必备组件,必须对其进行强签名.”错误. 解决方法: 1)在报错的解决方案中找到一个可以发布的项目(引用该XX.dll的项目未必可以发布) ...

  4. extjs fileuploadfield default value

    网上有非常多fileupload的demo,最有用的还是官方doc里面的sample. 可是真实业务中.可能会用到改动功能.这个时候就须要在打开的时候,给input框赋初始值. How to give ...

  5. nginx实战六

    Nginx错误日志 https://coding.net/u/aminglinux/p/nginx/git/blob/master/log/error.md Nginx错误日志平时不用太关注,但是一旦 ...

  6. gulp#4.0

    gitbook教程: https://dragon8github.gitbooks.io/gulp-webpack/content/an-zhuang-gulp-4-0.html gulpfile.j ...

  7. git版本控制文件提交到composer应用市场,并下载用市场的软件库

    要把github中的项目提交到composer中去,必须在github管理的项目中新建对应的composer.json文件, composer.json文件建立的方法 cmd定位到项目目录 compo ...

  8. MYSQL 更改数据库data存储目录 创建用户 创建权限 设置远程访问的权限.

    一. 怎么更改数据库data存储目录:  1. 安装MYSQL. 2. 切换到 C:\Program Files\MySQL\MySQL Server 5.6 3. 新建my.ini. 加入如下配置: ...

  9. PHP位操作符

    二进制怎么算 http://www.doc88.com/p-474114598610.html 这个涉及到系统底层,WEB开发中几乎没用到,知道下有这个东西就好了.底层的东西解释总是简单不了的. 变量 ...

  10. 每天一点儿Java--ComboBox

    import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.border.*; impor ...