做微信公众号时,移动端滑动效果(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
    });

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM