做微信公眾號時,移動端滑動效果(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