我这里用ajax获取数据,然后在success里给他加了一个效果var nav,
不过在外面要调用这个nav,要怎么弄,把var nav弄成全局的也没用
$.ajax({
type: "get",
url: "nav.php",
cache: false,
dataType: "json",
success: function(data) {
var data = data;
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<div class="swiper-slide" data-hash="' + data[i].datahash + '">' + data[i].nav + '</div>';
}
$(".swiper-nav .swiper-wrapper").get(0).innerHTML = html;
var nav = $('.swiper-nav').swiper({
slidesPerView: 'auto',
freeMode: true,
noSwiping: true,
freeModeFluid: true,
calculateHeight: true,
visibilityFullFit: true,
onSlideClick: function(nav) {
pages.swipeTo(nav.clickedSlideIndex)
}
})
},
error: function() {
alert("出错");
}
});
function fixPagesHeight() {
$('.swiper-pages').css({
height: $(window).height() - nav.height - 48
})
}
fixPagesHeight();
$.ajax()和fixPagesHeight()是顺序执行的
而ajax是一个异步调用,在ajax的success方法执行前你是拿不到值的,即使你设置全局变量都是没用
$(".swiper-nav .swiper-wrapper")中的html不是你所期望的
可以在这样修改
function fixPagesHeight() {
$.ajax({
type: "get",
url: "nav.php",
cache: false,
dataType: "json",
success: function(data) {
var data = data;
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<div class="swiper-slide" data-hash="' + data[i].datahash + '">' + data[i].nav + '</div>';
}
$(".swiper-nav .swiper-wrapper").get(0).innerHTML = html;
var nav = $('.swiper-nav').swiper({
slidesPerView: 'auto',
freeMode: true,
noSwiping: true,
freeModeFluid: true,
calculateHeight: true,
visibilityFullFit: true,
onSlideClick: function(nav) {
pages.swipeTo(nav.clickedSlideIndex)
}
});
fixPagesHeight(nav);
},
error: function() {
alert("出错");
}
});
}
或者
$.ajax({
type: "get",
url: "nav.php",
cache: false,
dataType: "json",
success: function(data) {
var data = data;
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<div class="swiper-slide" data-hash="' + data[i].datahash + '">' + data[i].nav + '</div>';
}
$(".swiper-nav .swiper-wrapper").get(0).innerHTML = html;
fixPagesHeight();
},
error: function() {
alert("出错");
}
});
function fixPagesHeight(){
var nav = $('.swiper-nav').swiper({
slidesPerView: 'auto',
freeMode: true,
noSwiping: true,
freeModeFluid: true,
calculateHeight: true,
visibilityFullFit: true,
onSlideClick: function(nav) {
pages.swipeTo(nav.clickedSlideIndex)
}
});
$('.swiper-pages').css({
height: $(window).height() - nav.height - 48
})
}
我觉得在外面先初始化nav的Swiper,可以先将Swiper隐藏,再成功ajax之后更新Swiper,Swiper里面有个update方法的。
在全局的地方初始化下这个变量 var nav=null;在ajax回调函数里面 前面这样写 nav=result.data; 注意前面不远加var
这个是真实代码运行顺序么?ajax执行没有完毕后你就调用nav.height了?当然没有。
建议你直接在ajax 成功后去取$('.swiper-nav').height()的值来做页面的高度。
设置成 同步执行 async:false
试一下~
不知道楼主是不是只是随手写的,我提一个与问题无关的建议
楼主可以这么写
function get(url, callback) {
$.ajax({
type: "get",
url: url,
success: callback,
.....
})
}
然后写一个函数作为参数,传给get
只是一个小建议,哈哈~