Swiper 框架7刷子不工作

Swiper 框架7刷子不工作,swiper,html-framework-7,Swiper,Html Framework 7,到目前为止,我正在为混合移动应用程序使用(非常酷的)Framework7库……但我遇到了一个问题。 在JS中,我为游泳运动员画了一条线 var slider=new Swiper(".swiper-container"); 在HTML中,视图中有一个页面,如下所示 <div class="pages navbar-through toolbar-through"> <!-- Page, "data-page" contains page name --&g

到目前为止,我正在为混合移动应用程序使用(非常酷的)Framework7库……但我遇到了一个问题。 在JS中,我为游泳运动员画了一条线

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>

朱利安·博伊罗

我们能拯救互联网吗? 早在1964年,冷战时期,保罗·巴兰发明了分组交换通信。这为一种全新的分布式通信方式铺平了道路,也为民主化迈出了一大步。

10年后,Bob Kahn和Vint Cerf最终用TCP/IP协议将这种方法标准化。这提供了一个公共堆栈,可以在边缘构建任何应用程序,其中网络只传输数据包。

15年后,Tim Berners Lee构建了其中一个应用程序,WWW。许多人都忘记了,这是他所做工作的一半,即消费部分,而撇开另一半,即创作部分,他被烤成了调查对象。

在接下来的15年里,互联网在这些技术的基础上发展,这要归功于分散的个人电脑开创了数字革命时代。

从那时起,互联网基本上是倒退的

ISP从未接受Baran发明的逻辑结果(最好的IP网络是最愚蠢的网络),他们将利润集中在向上整合“服务”和“内容”,而不是向下整合到更快、更便宜、更普遍的实用IP服务(2016年,IPv6还没有普及,我在巴黎地铁站也没有4G)。

幻灯片2

当我加载它时,我可以看到我的第一张幻灯片,但如果我向右滑动,我没有任何效果:第二张幻灯片即将到来,但却附着在我的手指上,就像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>

幻灯片1
幻灯片2

我再也看不到“幻灯片2”了

有人有线索帮我吗?快把我逼疯了

谢谢你的帮助


J.

好吧,第一件很明显的事情是你错过了swiper分页。如果这没有帮助,它可能是同一页上的第二个旋转木马。如果你的滑块在索引页中,没有其他想法,代码不足以精确解析。然后你需要调用update swiper来工作。你已经在js.u中初始化了swiper也可以在html中执行同样的操作。要更新swiper,您可以使用以下代码

$$('.swiperTab').on('show', function(){
    $$(this).find('.swiper-container')[0].swiper.update();
});
此处swiper选项卡是swiper容器的类名

它应该很好用