index.htmlの動的スワイパースライダーを扱っているFramework7アプリ

Question

index.htmlでスワイパースライダーを取得しました。このスワイパースライダーは、アプリの初期化時にのみ機能します。私がabout.htmlのような他のページに入り、index.htmlに戻ると、スワイパースライダーが消えます。私はこれで本当に失われました。

これはJS

var template = $$('#newsScript').html(); 
var compiledTemplate = Template7.compile(template); 
myApp.showPreloader('Cargando slider...'); 
$$.getJSON("http://centenariosa.com.ar/wp-json/wp/v2/posts?categories=8&orderby=title&order=asc&per_page=100",function(jsonslider){ 
myApp.hidePreloader(); 
var slider = jsonslider; 
var objuslider = []; 
for (var i = 0; i < slider.length; i++) { 
    var img = slider[i]["better_featured_image"]["media_details"]["sizes"]["wpbs-featured"]; 
    var acf = slider[i]["acf"]; 
    var t = {}; 
    t.id = i+1; 
    t.enlace = acf["motor"]; 
    t.imagendestacada = img["source_url"]; 
    objuslider.push(t); 
} 
Template7.data['page:index'] = objuslider; 
$$('#newsSwiper').html(compiledTemplate(objuslider)); 
//init swiper here 
myApp.onPageInit('index', function (page) { 
    var page = e.detail.page; 
    // "page" variable contains all required information about loaded and initialized page 
    var swiper = myApp.swiper('.swiper-container #newsSwiper', { 
     pagination:'.swiper-pagination', 
     direction: 'vertical', 
     autoplay: 4000 
    }); 
}).trigger(); 
}); 

Index.htmlと

<div class="swiper-container slide-home"> 
<div id="newsSwiper"></div> 
    <script type="text/template7" id="newsScript"> 
    <div class="swiper-wrapper"> 
     {{#each this}} 
     <div class="swiper-slide"><img src="{{imagendestacada}}"></div> 
     {{/each}} 
    </div> 
    </script> 
    <div class="swiper-pagination"></div>       
</div> 

Answer 1

OKです私はこの方法で解決しました。

これを行うより良い方法があるかどうかわかりません。しかし、それは私のために働く。

JS

var template = $$('#newsScript').html(); 
var compiledTemplate = Template7.compile(template); 
myApp.showPreloader('Cargando slider...'); 
$$.getJSON("http://centenariosa.com.ar/wp-json/wp/v2/posts?categories=8&orderby=title&order=asc&per_page=100",function(jsonslider){ 
    myApp.hidePreloader(); 
    var slider = jsonslider; 
    var objuslider = []; 
    for (var i = 0; i < slider.length; i++) { 
     var img = slider[i]["better_featured_image"]["media_details"]["sizes"]["wpbs-featured"]; 
     var acf = slider[i]["acf"]; 
     var o = []; 
     var t = {}; 
     var z = {}; 
     t.id = i+1; 
     t.enlace = acf["motor"]; 
     t.imagendestacada = img["source_url"]; 
     objuslider.push(t); 
    } 
    Template7.data['page:index'] = objuslider; 
    console.log(JSON.stringify(objuslider, null, 2)); 
    $$('#newsSwiper').html(compiledTemplate(objuslider)); 

    var swiper = myApp.swiper('.swiper-container #newsSwiper', { 
     pagination:'.swiper-pagination', 
     direction: 'vertical', 
     autoplay: 4000, 
     loop: true 
    }); 
    myApp.onPageInit('index', function (page) { 
     $$(page.container).find('.swiper-container #newsSwiper').html(compiledTemplate(objuslider)); 
     var swiper = myApp.swiper('.swiper-container #newsSwiper', { 
      pagination:'.swiper-pagination', 
      direction: 'vertical', 
      autoplay: 4000, 
      loop: true 
     }); 
    }).trigger(); 
}); 

INDEX.HTML

<div class="swiper-container slide-home container"> 
    <div id="newsSwiper"></div> 
    <script type="text/template7" id="newsScript"> 
    <div class="swiper-wrapper"> 
     {{#each this}} 
     <div class="swiper-slide"><img src="{{imagendestacada}}"></div> 
     {{/each}} 
     </div> 
     <div class="swiper-pagination"></div> 
    </script>        
</div>