0

我正在Phone Gap-android中做一个项目。我正在java脚本中实现功能。我已经使用它实现了SWIPE VIEW 。

现在，我将分享我用来实现此功能的编码，以帮助您找出我的错误。

var mySwiper = new Swiper('.swiper-container',{
//Your options here:
mode:'horizontal',loop: true, speed : 500, freeMode : true, freeModeFluid : true,
});  

value= VALUE_FROM_DB.split("||");
 for (k=0;k<value.length;k++)
 {
    if (value[0] == paramName1)
   {
      return unescape(value[k]);
      console.log("no of swipe views ");
   }
    var val = k+1;
    var superdiv = document.getElementById('swiper-wrapper');
    var newdiv = document.createElement('div');
    var divIdName = 'swiper-slide'+val;
    console.log("div name: "+divIdName);
    newdiv.setAttribute('id',divIdName);
    newdiv.setAttribute('class','swiper-slide');
    newdiv.style.width = "25%";
newdiv.style.height = "30%";
    superdiv.appendChild(newdiv);
    var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
    console.log("check value"+cnt1);
    document.getElementById(divIdName).innerHTML=cnt1;
    console.log("clinical values: "+value[k]);
console.log("processsing parameter loop ");
var searchString = window.location.search.substring(1),i,val,params = searchString.split("&");
}

html代码

<div id="swipe_body">
    <div class="swiper-container swiper-threshold">
        <div class="swiper-wrapper" id="swiper-wrapper">

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

CSS代码：

.clinical       
{
    font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
 background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
 width:auto; height:30%; display:block; overflow:hidden;float:left; 
}

现在，我的输出不是想要的。

仅显示 1 张幻灯片。未实现滑动功能，其余其他值均不可见。

我应该怎么办？请指导我！

第二种选择，我实现如下（在没有滑动视图之后）：

var val = k+1;
            var superdiv = document.getElementById('swiper-wrapper');
            var newdiv = document.createElement('div');
            var divIdName = 'swiper-slide'+val;
            console.log("div name: "+divIdName);
            newdiv.setAttribute('id',divIdName);
            newdiv.setAttribute('class','swiper-slide');
            superdiv.appendChild(newdiv);
     --->       var cnt1 ="var newSlide = mySwiper.createSlide('<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left/>;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>', 'swiper-slide', 'span');
            document.getElementById(divIdName).innerHTML=cnt1;
            document.querySelector('.swiper-slide');
            console.log("split value: "+value[k]);

我得到的输出错误是

05-20 12:11:20.214: E/Web Console(6855): Uncaught SyntaxError: Unexpected identifier at file:///android_asset/www/clinical.html?var%20id=0:171 (the line differentiated with an arrow)

最重要的事实是，所有 5 个值都显示在日志中。但是，正在看到 1 个幻灯片。

简而言之，滑动功能不起作用。

4

3 回答 3

2

尝试在创建幻灯片后立即调用 mySwiper.reInit()。另请查看幻灯片 API http://www.idangero.us/sliders/swiper/api.php#slidesapi

于 2013-05-20T18:40:17.090 回答
0

reInit在动态创建时，再次调用 Your Swiper 。在我的情况下，产品有各种颜色实例，第一次加载正常，通过点击颜色动态加载新内容，swiper插件无法检测到新添加的dom。

解决方法是调用reInit();

用例

var mySwiper = new Swiper('.swiper-container', {});

function dynamic_content(){mySwiper.reInit();}
于 2014-03-11T07:24:54.980 回答
0

可能为时已晚，但由于更新，其他答案似乎已过时。对我来说，以下行有效

mySwiper.appendSlide('<div class="swiper-slide">My Slides"</div>')
于 2016-08-01T14:59:08.717 回答