Framework7 swiper无法正常工作

Question

到目前为止，我正在使用（非常酷）Framework7 lib用于混合移动应用程序...但我遇到了一个问题。在JS中，我为swiper设置了一条线

var slider=new Swiper(".swiper-container");

在HTML中，我在视图中有一个页面，就像这样

<div class="pages navbar-through toolbar-through">
          <!-- Page, "data-page" contains page name -->
            <div class="page">
                <!-- Scrollable page content -->
                    <div class="page-content">
                      <!-- Slider -->
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="content-block">
                                        <div class="creator" style="float:left">
                                            <img src="http://onexchange-dev.azurewebsites.net/image/julien_boyreau.jpg">
                                        </div>
                                        <div style="float:left;margin-top:2%;margin-left:2%">Julien Boyreau</div>
                                        <div style="float:right;width:20%"><a href="#" class="button button-round trust">Trust</a></div>
                                        <br>
                                    </div>
                                    <div class="content-block">
                                        <div class="content-block-inner">
                                            <h2>Can we save the Internet ?</h2>
                                            <img style="width:100%" class="teaser" src="http://www.savetheinternet.com/sites/default/files/styles/1275_wide/public/topics/topic_internet-freedom.png?itok=O7Tiv8Vv">
                                            <p>
                                                Back in 1964, in a time of cold war, Paul Baran invented packet-switching communications. This paved the way to a radically new way of distributed communications and a formidable move to democratization.
                                            </p>
                                            <p>
                                                10 years later, Bob Kahn and Vint Cerf standardized eventually this approach with TCP/IP protocols. This provided a common stack onto which one could build at the edge whatever applications, where the network would only transmit the packets.

                                            </p>
                                            <p>
                                                15 years later, Tim Berners-Lee built one of these applications, WWW. Many have forgotten that this was half the coin of what he was working on, the consumption part, leaving aside the other half, the creation part, who was baked into ENQUIRE.
                                            </p>
                                            <p>
                                                In the next 15 years, the Internet grew on top of these technologies, thanks to decentralized PCs to start the digital revolutionnary era.
                                            </p>
                                            <p>Since then, the Internet has mostly moved backwards.</p>
                                            <p>
                                                ISPs, having never accepted the logical consequence of Baran’s invention (the best IP network is the dumbest one), have focused their profits to integrate upward to “Services” and “Content” instead of downward to faster & cheaper & more pervasive utilitarian IP service (In 2016, IPv6 is still not pervasive and I have no 4G in Paris’ subway).
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">

                                   <p style="text-align:center">Slide 2</p>


                                </div>
                            </div>
                        </div>
                    </div>
            </div>

当我加载它时，我可以看到我的第一张幻灯片，但是如果我向右滑动，我没有任何效果：第二张幻灯片即将到来但是附在我的手指上，就像2个滑动滑块被粘住一样。

更奇怪的是，如果我把它放在页面中：

<div class="pages navbar-through toolbar-through">
          <!-- Page, "data-page" contains page name -->
            <div class="page">
                <!-- Scrollable page content -->
                    <div class="page-content">
                      <!-- Slider -->
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                        slide 1
                                </div>
                                <div class="swiper-slide">

                                   <p style="text-align:center">Slide 2</p>


                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>

我不能再滑动看到“幻灯片2”了。

有人有线索帮助我吗？这让我疯狂......

谢谢你的帮助，

J.

Answer 1

如果滑块位于索引页面中。然后你需要调用更新swiper工作。你已经在js中初始化了swiper。你也可以在html中做同样的事情。要更新swiper，您可以使用下面的代码

$$('.swiperTab').on('show', function(){
    $$(this).find('.swiper-container')[0].swiper.update();
});

swiper tab是swiper容器的类名。

它应该工作正常。

Answer 2

嗯，首先明显的是你错过了swiper的分页。如果这没有帮助，它可能是同一页面上的第二个轮播。没有其他想法，代码不足以获得精确的解决方案