今天在使用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. C# 发布REST接口地址API服务

    原文地址:https://blog.csdn.net/chinacsharper/article/details/21256569 今天碰巧,用到了淘宝的在线IP地址查询的Rest API,它提供接口 ...

  2. ASP.NET MVC ajax处理 AjaxResult

    1.统一ASPNET MVC 对ajax请求响应格式定义,方便前端统一处理ajax结果. 1)定义程序返回结果数据格式 /// <summary> /// 执行结果 /// </su ...

  3. 存储映射I/O

    一个进程拥有独立并且连续虚拟地址空间,在32位体系结构中进程的地址空间是4G.不过,内核在管理进程的地址空间时是以内存区域为单位.内存区域是进程整个地址空间中一个独立的内存范围,它在内核中使用vm_a ...

  4. Jquery定位插件,固定元素在页面某个位置,不随滚动条滚动

    代码: (function ($) { "use strict"; $.fn.pin = function (options) { var scrollY = 0, element ...

  5. [转] 基本RS触发器

    在触发器中,最简单的触发器是基本RS触发器,它由两个与-非门(或者两个或-非门)来组成. 图5.2.1(a)是由与-非门构成的基本RS触发器,由图看出,基本RS触发器有两个输入端(和)和两个输出端(和 ...

  6. Spring Boot热部署(springloader)

    使用方式一 在pom.xml文件添加依赖包: <plugin> <groupId>org.springframework.boot</groupId> <ar ...

  7. mysql-5.7.20 版本的 mysql-group-replication 可用性测试报告

    一.喜迎 mysql-5.7.20  事实上mysql-group-replication 功能是在mysql-5.7.17这个版本上引入的,它实现了mysql各个结点间数据强一致性, 这个也成为了我 ...

  8. unity 获得父子节点

    与常识不同,unity中获得父子节点需要通过transform.即先获得父/子节点的transform,然后再通过父/子节点的transform获得父/子节点. 获得父节点gameObject: Ga ...

  9. 【Android】7.8 MyDemos项目的结构和主界面相关代码

    分类:C#.Android.VS2015: 创建日期:2016-02-17 一.简介 上一讲已经说过,系统升级为Win10后,重新创建了一个新的项目:MyDemos,并把前7章合并到了这个项目中,这次 ...

  10. Python标准库:内置函数getattr(object, name[, default])

    本函数实现获取对象object的属性.属性由name来表示,就是属性名称的字符串.參数default是可选的參数,当获取对象的属性不存在时,就返回此值.假设没有提供此參数.同一时候在对象属性里也找不到 ...