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

 

posted @ 2017-12-02 13:27  pyj063  阅读(5746)  评论(3编辑  收藏  举报