Question

我使用bxSlider作为一个简单的滑块。当在浏览器上显示时，bxSlider可以正常工作，但在phonegap中调试时，滑块会显示带有滑块导航箭头的白色背景。

请帮忙......

Answer 1

我在Cordova和JqueryMobile遇到了同样的问题。在iOS中，bxSlider像魅力一样工作，但在android中我得到的是与你一样的箭头一样的空白屏幕。

我认为它与$（document）.ready（）函数有关。在某些方面，在Android中DOM没有很好的组织，因此bxSlider无法完成他的工作并隐藏所有图像。

如果是这种情况，您可以解决在文档就绪之后调用jquerymobile的其他事件中的bxSlider init函数。这样的事情应该有效：

<body>
    <div data-role="page" id="slider">
        <script>
            $('#slider').on('pageshow', function(){
                 $('.bxslider').bxSlider({
                     onSliderLoad: function(){
                          $('.slider_wrapper').css('visibility', 'visible');
                     }    
             });
        </script>
        <div data-role="header" data-position="fixed">
            <h1>Slider page</h1>
        </div>
        <div class="slider_wrapper">
            <ul class="bxslider">
                <li><img src="img/slider/business-h-c-480-640-10.jpg" /></li>
                /** Your images here **/
                <li><img src="img/slider/business-h-c-480-640-7.jpg" /></li>
            </ul>
        </div>
    </div>
</body>

请记住在css文件中添加一条规则来隐藏滑块包装器，例如：

.slider_wrapper{
    visibility: hidden;
}

这是因为您在页面显示时调用初始化滑块，因此最终用户应该看到您的图像未格式化并且在滑块工作后的短暂时间。你不应该写display：none，因为滑块也不会工作。

希望这能成为你的伎俩。

bxSlider在phonegap中显示白色背景

1 个答案: