ajax加载页面iscroll失效,javascript,_使用iscroll 底部被遮住(异步加载DOM造成的高度问题造成iScroll不能滚动)怎么解决,javascript - phpStudy...
使用iscroll 底部被遮住(异步加载DOM造成的高度问题造成iScroll不能滚动)怎么解决$(document).ready(function () {App.Current = {Page: {PageAt: 1,PageCount: 3,reset: function () {this.PageAt = 1;}}};function initScroller() {var pullDow
使用iscroll 底部被遮住(异步加载DOM造成的高度问题造成iScroll不能滚动)怎么解决
$(document).ready(function () {
App.Current = {
Page: {
PageAt: 1,
PageCount: 3,
reset: function () {
this.PageAt = 1;
}
}
};
function initScroller() {
var pullDown = document.querySelector("#PullDown"),
pullUp = document.querySelector("#PullUp"),
isPulled = false; // 拉动标记
var myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
scrollbars: true,
preventDefault: false,
fadeScrollbars: true
});
var direction = '';
myScroll.on('scroll',
function () {
var height = this.y,
bottomHeight = this.maxScrollY - height;
// 控制下拉显示
if (height >= 60) {
pullDown.style.display = "block";
isPulled = true;
return;
} else if (height < 60 && height >= 0) {
direction = 'up';
pullDown.style.display = "none";
return;
}
// 控制上拉显示
if (bottomHeight >= 60) {
pullUp.style.display = "block";
isPulled = true;
return;
} else if (bottomHeight < 60 && bottomHeight >= 0) {
direction = 'down';
pullUp.style.display = "none";
return;
}
});
myScroll.on('scrollEnd', function () { // 滚动结束
if (isPulled) { // 如果达到触发条件,则执行加载
isPulled = false;
if (direction === 'up') {
//下拉刷新
loadList( 0, direction);
}
else {
//加载更多
loadList((App.Current.Page.PageAt) * App.Current.Page.PageCount, direction);
}
myScroll.refresh();
}
});
window.myScroll = myScroll;
}
initScroller();
function loadList( skipCount, direction) {
$.ajax({
type: "Post",
url: App.ApiAddress.GetComments,
data: JSON.stringify({
skipCount: skipCount,
maxResultCount: App.Current.Page.PageCount,
userId:null,
activityId:null,
venueId:null
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.success && response.result) {
var items = response.result.items;
if (items && items.length > 0) {
var html = '';
var template = $('#listItem').html();
for (var i = 0; i < items.length; i++) {
var images=(function(){
var html='';
if(items[i].images&&items[i].images.length>0){
for(var j=0;j
html+='
}
}
return html;
})();
html += template
.replace(/{{creationTime}}/g, moment(items[i].creationTime).format('YYYY-MM-DD HH:mm'))
.replace(/{{content}}/g, items[i].content)
.replace(/{{activity.coverUrl}}/g, items[i].activityArticle.coverUrl)
.replace(/{{activity.name}}/g, items[i].activityArticle.name)
.replace(/{{activity.place}}/g, items[i].activityArticle.place)
.replace(/{{images}}/g, images)
}
if (direction === 'up') {
$('#index_list').empty().append(html).fadeIn(500);
App.Current.Page.reset();
}
else {
$('#index_list').append(html);
App.Current.Page.PageAt++;
}
$('#index_list').fadeIn(500);
lazyLoadImage();
window.myScroll.refresh();
}
else {
if (direction === 'up')
$('#index_list').fadeOut(500).empty();
}
}
else {
if (direction === 'up')
$('#index_list').fadeOut(500).empty();
}
},
error: function (msg) {
}
});
}
loadList(0,'up');
function lazyLoadImage() {
Echo.init({
offset: 0,
throttle: 50 //延迟时间
});
}
lazyLoadImage();
});
相关阅读:
sublime的光标变成这样的了咋办?
关于python中的Queue与daemon进程?
移动端使用webp格式图片效果怎么样?
SQL like语句问题和PATINDEX
java关于文件目录操作
smarty字符串取整怎么没有效果{$card.ori|string_format:"%d"}
jsPlumb 每次在连接端点的时候,排成一个串联的顺序格式。
spring+quatz 配置 design.xml 里面的 messageKey 的作用是什么
一个微信开发URL转跳的问题
如何解决vuejs不能把后面增加、改动的元素渲染出来
gulp-htmlone运行后生成的html文件运行报错
为什么 npm intall 安装的包无法运行
JDK6中String的subString方法内存泄露及溢出问题
关于并发的一个问题
boostrap下拉插件的li元素会换行
请问我这样用jq写的轮播图 淡入淡出的切换效果为什么没用啊 而且自动轮播也有问题
phpstorm怎么修改FTP文件
关于js简单模块加载器的问题
怎么控制网页中iframe里的js执行问题?
antd npm start 后访问报错
更多推荐

所有评论(0)