zoukankan      html  css  js  c++  java
  • 做微信公众号时,移动端滑动效果(swiper插件(display:none))显示滑动问题

         微信公众号的制作,其中缺少不了希望实现标题、内容、图片的滑动效果,

    这时候可以选择使用(swiper插件)实现相应效果,功能十分强大,链接:http://www.swiper.com.cn/;

    最近做一款公众号时,在实现功能时遇到一难点,废了九牛二虎之力,终于在一高人的帮助下解决了。

      1、问题描述:

        原本该滑动项是隐藏的(display:none;),滑动项的代码是参考swiper插件文档内容而写,

      通过按钮点击之后该滑动项显示(dispay:block),再进行左右滑动效果时,始终显示swiper-slider项的width:0;

      故而导致没有效果出来。

      2、解决方案:  

        (1)在本身元素  或者父元素  显示出来  然后调用swiper实例 ;

        (2) observer:true,//修改swiper自己或子元素时,自动初始化swiper

                observeParents:true//修改swiper的父元素时,自动初始化swiper

      备注:代码如下(添加一监听事件):

        var swiper2 = new Swiper('.swiper-container2', {

          observer: true,//修改swiper自己或子元素时,自动初始化swiper
          observeParents: true,//修改swiper的父元素时,自动初始化swiper
        });

  • 相关阅读:
    JS 录音
    JS学习笔记 之 作用域链
    JS学习笔记 之 预编译
    JS学习笔记 之 递归
    JS学习笔记 之 函数声明
    JS学习笔记 之 隐式类型转换
    JS学习笔记 之 typeof
    JS学习笔记 之 for循环
    JS学习笔记 之 运算符
    JS学习笔记 之 数据类型
  • 原文地址:https://www.cnblogs.com/pyj63/p/7954009.html
Copyright © 2011-2022 走看看