Swiper JS Phonegap问题答案

【问题标题】：Swiper JS Phonegap issueSwiper JS Phonegap问题
【发布时间】：2017-01-06 11:55:56
【问题描述】：

我正在为我的图片库开发一个使用 Swiper JS 的 web 应用程序。如果不使用Phonegap，它可以正常工作，但是使用Phonegap，“幻灯片”效果不能正常工作，并且显示了JS的上一个/下一个按钮，但它们是不可触摸的。奇怪的是，它在更改我的浏览器窗口（firefox）的大小后开始工作。有什么想法吗？

        <!-- Swiper -->
    <div class="swiper-container">
        <div id="swiper-wrapper" class="swiper-wrapper">
            <div id="img0" class="swiper-slide"></div>
            <div id="img1" class="swiper-slide"></div>
            <div id="img2" class="swiper-slide"></div>
            <div id="img3" class="swiper-slide"></div>
            <div id="img4" class="swiper-slide"></div>
            <div id="img5" class="swiper-slide"></div>
            <div id="img6" class="swiper-slide"></div>
            <div id="img7" class="swiper-slide"></div>
            <div id="img8" class="swiper-slide"></div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
    });
    </script>

图片是通过 DOM 加载的

【问题讨论】：

标签： javascript cordova swiper

【解决方案1】：

我通过以下解决方案解决了这个问题：

循环浏览我的图像并将它们添加到 swiper-wrapper 中：

var str = "<div class=swiper-slide><a href=data:iamge/png;base64,"+image_data+" data-lightbox="+image_id+" data-title="+image_date+" "+image_time+"><img src=data:image/png;base64,"+image_data+" class=gallery_images></img></a></div>";
$('.swiper-wrapper').append(str);

然后启动 Swiper：

    var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30
});

在设置 divs 属性 display:inherit 后，我不得不更新 swiper 对象：

swiper.update(true);

【讨论】：