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

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

感谢您的帮助，

学家

Answer 1

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

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

此处swiper tab是swiper容器的类名。

它应该可以正常工作。

Answer 2

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

Framework7 swiper无法正常工作

2 个答案: