Question

我在 index.html 上获得了一个Swiper Slider，只有在应用初始化时才有效。如果我进入其他页面，例如about.html，然后返回index.html，Swiper Slider就会消失。我真的迷失了。

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

好的，我这样解决了。

我不知道是否有更好的方法可以做到这一点。但它对我有用。

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

Framework7应用程序处理index.html上的动态Swiper Slider

1 个答案: