Jquery Framework7应用程序处理index.html上的动态滑动条

我在index.html上有一个Swiper滑块，它只在应用程序初始化时起作用。如果我在另一个页面上输入about.html，然后返回index.html，Swiper滑块将消失。我真的输了

这是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>

好的，我这样解决了

我不知道是否有更好的方法。但这对我很有效

JS

INDEX.HTML

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();
});

<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>