今天在使用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. Python学习笔记020——数据库中的数据类型

    1 数值类型 数值类型分为有符号signed和无符号unsigned两种. 1.1 整型 int (1)bigint 极大整型(8个字节) 范围 :-2**64 ~ 2**64 - 1 -922337 ...

  2. 转 python selenium 常见问题列表

    怎么用ChromeDriver ? 从这里下载最新的driver版本并解压   # 好吧,这个命令是给linux or osx用户准备的 # windows用户直接手点吧 by 乙醇 unzip ch ...

  3. DevExpress.XtraReports:XRPivotGrid 笔记

    1. DevExpress.XtraReports:XrPivotGrid 显示时间为"0"的 格式问题: 把xrPivotGridField1的SummaryType改为&quo ...

  4. Storm 简单介绍

    Nimbus :负责资源分配和任务调度, 把任务相关的元信息写入Zookeeper 对应文件夹. Supervisor :负责接受nimbus 分配的任务,启动和停止属于自己管理的worker 进程. ...

  5. Java将数据库数据导入EXCEL

    一般的数据库数据怎么导入excel中呢??这让人非常疑惑,今天我找到了一个方法能够实现 须要导入一个第三方包下载地址 详细内容例如以下: 里面含有指导文档,index.html里面含有怎样读取数据库文 ...

  6. 【Android】11.1 Activity的生命周期和管理

    分类:C#.Android.VS2015: 创建日期:2016-02-21 一.基本概念 1.必须理解这些方法,否则你编的程序根本就没法在实际项目中使用 当然,如果仅仅是为了玩玩,或者仅仅是作为例子为 ...

  7. [phpcms v9]自定义表单添加验证码验证功能

    修改  \phpcms\templates\default\formguide\show.html 中添加验证码显示 <input type="text" id=" ...

  8. CCMotionStreak(一)

    void MotionStreakTest1::onEnter() { MotionStreakTest::onEnter(); CCSize s = CCDirector::sharedDirect ...

  9. Azure Nosql

    patterns & practices https://msdn.microsoft.com/en-us/library/ff921345.aspx Solution Development ...

  10. springboot获取URL请求参数的多种方式

    1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交. /** * 1.直接把表单的参数写在Controller相应的方法的形参中 * @pa ...