私は Phone Gap-android.I でプロジェクトを行っています。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 つだけです。スワイプ機能は実装されておらず、残りの他の値は表示されません。
私は何をすべきか?私を案内してください!!。
2番目の代替案、私が実装したのは次のとおりです(スワイプビューの数の後):
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 つのスライドが表示されています。
簡単に言えば、スワイプ機能が機能していません。