Swiperは、動的データのページングの混乱を変えて解決します

swiperが動的データのページのポケットベル番号を変更した後、コンテンツの提示不足が生じ、混乱状態になります。

この記事のソリューションは、本当の意味で問題を解決して考えることはできません。ただ、要求事項への適合を表示します。

レンダリング：

ソリューション：

毎回動的に変化データを削除、元swiperを考え、追加し、データだけでswiper-ラッパーを変更、swiperを再初期化します。以下を達成するために特定のコード：

HTML：

<！ - HTML - > 
< divのID = "swiperBox" > 
    < divのクラス= "swiperコンテナ" ID = "img_detail" > 
        < divのクラス= "swiper-ラッパー" ID = "swiperImgs" > 
        </ DIV > 
        <！ - 分页器- > 
        < divのクラス= "swiper-ページネーション" > </ DIV > 
    </ DIV > 
</ DIV >

公式ドキュメントとサンプルのhtmlの部分は同じで与えられています。私はちょうどswiperコンテナの外側と設定の<div>に動的に削除すると、動的回でデータを変更swiper追加します。

// JS 

VAR NUM = 7; // スライディングウィンドウ数でピクチャ
VARカラー= "赤"; // 色現在選択されているパケット

window.onload = 関数（）{
     この.INIT（）; 
} 

// 初期化スライド窓の
機能のinit（）{
     のために（VAR。I = 1; I <= この .num; ++ I）{ 
        $（ "#swiperImgs"）APPEND（「<のdivクラス= "スライドSwiper"> <IMG SRC = "イメージ/ '+色+' / D '+ I +' .JPG"スタイル= "幅：100％;"> </ DIV> ' ）
    } 
    VAR mySwiper = 新新 Swiper（'。swiperコンテナ」 、{
        ループ：trueに、
        ページネーション：{ 
            EL： 'ページ区切り-.swiper' 、
        } 
    }）
} 

// 変更色
関数changeColor（C、N - 、OBJ）{ 
    カラー = C; 
    NUM = N-;
     VARの親= obj.parentNode; 
    $（親.childNodes）.removeClass（ "選択" ）; 
    $（OBJ）.addClass（ "選択" ）; 
    $（ "#swiperBox" ）.empty（）; //はswiper元を削除します 
    $（"#swiperBox"）。APPEND（ ' <DIV CLASS = "swiperコンテナ" ID = "img_detail"> <DIV CLASS = "swiperラッパー" ID = "swiperImgs"> </ div> <DIV CLASS =「swiper- ページネーション「> </ DIV> </ DIV> ' ）; //新しいSwiperに追加 
    のinit（）; //初期化とSwiperを完了するために、コンテンツを追加 
}

オンライン方法は以下のプロパティを設定するために、よりswiperで観察：trueに変更されたデータ、またはお電話mySwiper.updateを（）更新する機能を、私が試してみましたが、まだいくつかの問題、あるいは他のポケベルのタグになりますどのように多くの数の間違った、または他のページャのラベルがように従うとして動きません。このアプローチに絶望で、安心して。

ここで私は、ボタンのHTMLの色を変更するものです。

<！ - 颜色选择器- > 
< divのクラス= "カラーボックス" > 
    < ボタンのonclick = "changeColor（ '赤'、7、この）" クラス= "選択" > < IMG SRC = "画像/ colorBut /赤.pngを」/> </ ボタン> 
    < ボタンのonclick = "changeColor（3、 'グリーン'本）" > < IMG SRC = "画像/ colorBut / green.jpg" /> </ ボタン> 
</ DIV >