我正在使用iDangerous Swiper库与Jquery Mobile框架一起显示移动滑动触摸库。 它工作正常,但如果我离开索引页面(画廊所在的位置)然后返回,则分页小部件无法正常工作。它仍然出现(我可以看到子弹),它仍然是可点击的,即如果我“触摸”子弹,画廊滑动到相应的幻灯片,子弹变得“活跃”,但它不会以相反的方式工作,换句话说,它不响应幻灯片更改:如果我在幻灯片中滑动,则当前活动项目符号不会更新。
这是初始化代码:
$( document ).on( "pageshow", "#index-page", function( event ) {
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
});
该页面与jquery mobile的 data-ajax =“true”属性相关联,以保留全局范围。
答案 0 :(得分:0)
它帮助我分页swiper idangerous jquery mobile
$(document).one("pageshow", "#page1", function (e) {
var swiper = new Swiper('.swiper-container', {
paginationClickable: true,
hashnav: true,
pagination: '.swiper-pagination',
hashnav: true });
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
});
答案 1 :(得分:0)
问题: 初始化 swiper 两次。
解决方案: 在“pageshow”事件之外定义一个全局变量“swiper”。第一次加载图库时,全局变量“swiper”将是“undefined”。当您离开页面并返回时,全局变量“swiper”不会“未定义”。那就不要再初始化了。
<script>
var swiper;
$(document).on("pageshow", "#page1", function (e) {
if (swiper == undefined) {
swiper = new Swiper('.swiper-container', {
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
}
});
</script>