javascript - 移动端页面新闻列表内容显示不全（页面切换后的位置问题）
本文介绍了javascript - 移动端页面新闻列表内容显示不全（页面切换后的位置问题）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
别人写的代码存在bug（代码高能预警）附：http://owodream.net/WapInterf...，（作者在页面中使用了iscoll插件）现在甩给我来改，问题的基本情况是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>呱呱头条</title>
<link rel="stylesheet" type="text/css" href="${basePath}/resources/css/common/reset-mobile.css"/>
<link rel="stylesheet" type="text/css" href="${basePath}/resources/css/home.css"/>
<link rel="stylesheet" type="text/css" href="${basePath}/resources/css/main.css"/>
<link rel="stylesheet" type="text/css" href="${basePath}/resources/css/common/swiper.min.css"/>
</head>
<body>
<div class="cover"></div>
<img class="loading" src="${basePath}/resources/img/read10.gif" href="${basePath}/resources/img/read10.gif"/><!--页面加载时的遮罩层gif-->
<!--滑动导航栏-->
<div class="navBox">
<div class="wrapper wrapper03" id="wrapper03" ng-controller="navCtrl">
<div class="scroller">
</div>
</div>
<div class="Carousel">
</div>
</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownLabel">下拉刷新</span>
</div>
<ul id="thelist" class="article">
<!--<li>原始数据</li>-->
</ul>
<div id="pullUp">
<span class="pullUpLabel">上拉加载更多</span>
</div>
</div>
</div>
<!--路由-->
<div ng-view id="articlelist"></div>
</body>
<script src="${basePath}/resources/js/common/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${basePath}/resources/js/common/necessary.js" type="text/javascript" charset="utf-8"></script><!--需改进-->
<script src="${basePath}/resources/js/common/iscroll.js" type="text/javascript" charset="utf-8"></script><!--iscroll插件 活动导航栏-->
<script src="${basePath}/resources/js/common/navbarscroll.js" type="text/javascript" charset="utf-8"></script>
<script src="${basePath}/resources/js/common/iscroll2.js" type="text/javascript" charset="utf-8"></script>
<script src="${basePath}/resources/js/main1.js" type="text/javascript" charset="utf-8"></script>
<script src="${basePath}/resources/js/common/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
//页面加载中的遮罩动画
$(".cover").show();
$(".loading").show();
$(".cover").height(document.documentElement.clientHeight)
$.ajax({
type: "post", //使用get方法访问后台
// dataType: "json", //返回json格式的数据
url: "${basePath}/article/ArticleType", //要访问的后台地址
data: {"Infversion": "1.0"}, // 你的formid
success: function (data1) {//msg为返回的数据，在这里做数据绑定
var oData = JSON.parse(data1).data;
console.log(oData)
var str = "<ul class='clearfix'>";
for (var i = 0; i < oData.length; i++) {
if (oData[i].item.length > 0) {
var url = "";
var picpath = "";
for (var j = 0; j < oData[i].item.length; j++) {
url = url + oData[i].item[j].url + "**";
picpath = picpath + oData[i].item[j].picpath + "**";
}
url = url.substring(0, url.length - 2)
picpath = picpath.substring(0, picpath.length - 2)
str += "<li url='" + url + "' picpath='" + picpath + "' id='article" + oData[i].catalogid + "' onclick='article(" + oData[i].catalogid + ")'><a href='javascript:void(0);'>" + oData[i].catalogname + "</a></li>"
} else {
str += "<li id='article" + oData[i].catalogid + "' onclick='article(" + oData[i].catalogid + ")'><a href='javascript:void(0);'>" + oData[i].catalogname + "</a></li>"
}
}
str += '</ul>'
$(".scroller").html(str);
var ispicpath = $("#article1").attr("picpath");
var isurl = $("#article1").attr("url");
var isurlarr = new Array(); //定义一数
var ispicpatharr = new Array(); //定义一数
if (typeof(ispicpath) != "undefined") {
isurlarr = isurl.split("**");
ispicpatharr = ispicpath.split("**");
var str1 = "";
for (var i = 0; i < isurlarr.length; i++) {
// alert("isurl:"+isurlarr[i]);
str1 += '<a href=" ' + isurlarr[i] + ' " class="swiper-slide"><img src="' + ispicpatharr[i] + '"></a>';
var strs = '<div class="swiper-container"><div class="swiper-wrapper">' + str1 + '</div></div>';
$(".Carousel").html(strs);
//轮播图样式
var swiper = new Swiper('.swiper-container', {
pagination: '.pagination',
loop: true,
grabCursor: true,
autoplay: 4500,
autoplayDisableOnInteraction: false
});
}
} else {
$(".Carousel").html(" ");
}
$('.clearfix li').first().children('a').css('margin-left', '5.6rem')
$('.wrapper').navbarscroll();
}
});
$.ajax({
type: "post", //使用get方法访问后台
// dataType: "json", //返回json格式的数据
url: "${basePath}/article/ArticleList", //要访问的后台地址
data: {
"UID": "1500724505",
"pageSize": "20",
"pageIndex": "1",
"catalogid": "1",
"Infversion": "1.0"
}, // 你的formid
success: function (obj) {//msg为返回的数据，在这里做数据绑定
var oData = JSON.parse(obj).data;
console.log(oData)
var str = "";
for (var i = 0; i < oData.length; i++) {
if (oData[i].imagesnumber == 1) {
str += "<a class='a-title' href='${basePath}/article/ArticleListjump?articleid=" + oData[i].articleid + "'><li id=" + oData[i].articleid + " class='shortArticle'><div><div class='title'><span class='span-title'>" + oData[i].title + "</span><span class='readNum'>" + oData[i].hits + '阅读' + "</span></div><img src=" + oData[i].imageitem[0].image + "></div></li></a>"
}
if (oData[i].imagesnumber == 3) {
str += "<a class='a-longTitle' href='${basePath}/article/ArticleListjump?articleid=" + oData[i].articleid + "'><li id=" + oData[i].articleid + " class='longArticle'><div><div class='title'><span class='span-longTitle'>" + oData[i].title + "</span><div><img src=" + oData[i].imageitem[0].image + "/><img src=" + oData[i].imageitem[1].image + "><img src=" + oData[i].imageitem[2].image + "></div><span class='readNum'>" + oData[i].hits + '阅读' + "</span></div></div></li></a>"
}
}
$("#thelist").html(str)
//页面加载遮罩淡入淡出效果
$(".cover").fadeOut();
$(".loading").fadeOut();
myScroll.refresh();
}
});
});
var catalogid = 1;
function article(id) {
catalogid = id;
myScroll.refresh();
$("#thelist").html(" ")
var path = "article" + id;
var ispicpath = $("#" + path).attr("picpath");
var isurl = $("#" + path).attr("url");
var isurlarr = new Array(); //定义一数
var ispicpatharr = new Array(); //定义一数
if (typeof(ispicpath) != "undefined") {
isurlarr = isurl.split("**");
ispicpatharr = ispicpath.split("**");
var str1 = "";
for (var i = 0; i < isurlarr.length; i++) {
//alert("isurl:"+isurlarr[i]);
str1 += '<a href=" ' + isurlarr[i] + ' " class="swiper-slide"><img src="' + ispicpatharr[i] + '"></a>';
var str = '<div class="swiper-container"><div class="swiper-wrapper">' + str1 + '</div></div>';
console.log(str)
$(".Carousel").html(str);
//轮播图
var swiper = new Swiper('.swiper-container', {
pagination: '.pagination',
loop: true,
grabCursor: true,
autoplay: 4500,
autoplayDisableOnInteraction: false
});
}
} else {
$(".Carousel").html(" ");
}
var getH = $(".navBox").height();
$("#wrapper").css('top', $(".navBox").height());
//页面加载过程中的遮罩层
$(".cover").show();
$(".loading").show();
$.ajax({
type: "post", //使用get方法访问后台
// dataType: "json", //返回json格式的数据
url: "${basePath}/article/ArticleList", //要访问的后台地址
data: {
"UID": "1500724505",
"pageSize": "20",
"pageIndex": "1",
"catalogid": id,
"Infversion": "1.0"
}, // 你的formid
success: function (obj) {//msg为返回的数据，在这里做数据绑定
var oData = JSON.parse(obj).data;
var strstr = "<ul class='clearfix'>";
for (var i = 0; i < oData.length; i++) {
if (oData[i].imagesnumber == 1) {
strstr += "<a class='a-title' href='${basePath}/article/ArticleListjump?articleid=" + oData[i].articleid + "'><li id=" + oData[i].articleid + " class='shortArticle'><div><div class='title'><span class='span-title'>" + oData[i].title + "</span><span class='readNum'>" + oData[i].hits + '阅读' + "</span></div><img src=" + oData[i].imageitem[0].image + "></div></li></a>"
}
if (oData[i].imagesnumber == 3) {
strstr += "<a class='a-longTitle' href='${basePath}/article/ArticleListjump?articleid=" + oData[i].articleid + "'><li id=" + oData[i].articleid + " class='longArticle'><div><div class='title'><span class='span-longTitle'>" + oData[i].title + "</span><div><img src=" + oData[i].imageitem[0].image + "/><img src=" + oData[i].imageitem[1].image + "><img src=" + oData[i].imageitem[2].image + "></div><span class='readNum'>" + oData[i].hits + '阅读' + "</span></div></div></li></a>"
}
}
strstr += '</ul>'
$("#thelist").append(strstr)
//为加载动画添加淡入淡出效果
$(".cover").fadeOut();
$(".loading").fadeOut();
myScroll.refresh();
}
});
}
var i = 1;
function pullUpAction(catalogid) {
//请求的时候出现转圈圈的图
$(".cover").show();
$(".loading").show();
i++;
myScroll.refresh();
$.ajax({
type: "post", //使用get方法访问后台
// dataType: "json", //返回json格式的数据
url: "${basePath}/article/ArticleList", //要访问的后台地址
data: {
"UID": "1500724505",
"pageSize": "20",
"pageIndex": i,
"catalogid": catalogid,
"Infversion": "1.0"
}, // 你的formid
success: function (obj) {//msg为返回的数据，在这里做数据绑定
var oData = JSON.parse(obj).data;
var str = "";
for (var i = 0; i < oData.length; i++) {
if (oData[i].imagesnumber == 1) {
str += "<a class='a-title' href='${basePath}/article/ArticleListjump?articleid=" + oData[i].articleid + "'><li id=" + oData[i].articleid + " class='shortArticle'><div><div class='title'><span class='span-title'>" + oData[i].title + "</span><span class='readNum'>" + oData[i].hits + '阅读' + "</span></div><img src=" + oData[i].imageitem[0].image + "></div></li></a>"
}
if (oData[i].imagesnumber == 3) {
str += "<a class='a-longTitle' href='${basePath}/article/ArticleListjump?articleid=" + oData[i].articleid + "'><li id=" + oData[i].articleid + " class='longArticle'><div><div class='title'><span class='span-longTitle'>" + oData[i].title + "</span><div><img src=" + oData[i].imageitem[0].image + "/><img src=" + oData[i].imageitem[1].image + "><img src=" + oData[i].imageitem[2].image + "></div><span class='readNum'>" + oData[i].hits + '阅读' + "</span></div></div></li></a>"
}
}
$("#thelist").append(str);
myScroll.refresh();
$(".cover").fadeOut();
$(".loading").fadeOut();
}
});
}
//下拉刷新当前数据
function pullDownAction(catalogid) {
//请求的时候出现转圈圈的图
$(".cover").show();
$(".loading").show();
myScroll.refresh();
$("#thelist").html(" ")
$.ajax({
type: "post", //使用get方法访问后台
// dataType: "json", //返回json格式的数据
url: "${basePath}/article/ArticleList", //要访问的后台地址
data: {
"UID": "1500724505",
"pageSize": "20",
"pageIndex": 1,
"catalogid": catalogid,
"Infversion": "1.0"
}, // 你的formid
success: function (obj) {//msg为返回的数据，在这里做数据绑定
var oData = JSON.parse(obj).data;
var str = "";
if (oData.length > 0) {
for (var i = 0; i < oData.length; i++) {
if (oData[i].imagesnumber == 1) {
str += "<a class='a-title' href='${basePath}/article/ArticleListjump?articleid=" + oData[i].articleid + "'><li id=" + oData[i].articleid + " class='shortArticle'><div><div class='title'><span class='span-title'>" + oData[i].title + "</span><span class='readNum'>" + oData[i].hits + '阅读' + "</span></div><img src=" + oData[i].imageitem[0].image + "></div></li></a>"
}
if (oData[i].imagesnumber == 3) {
str += "<a class='a-longTitle' href='${basePath}/article/ArticleListjump?articleid=" + oData[i].articleid + "'><li id=" + oData[i].articleid + " class='longArticle'><div><div class='title'><span class='span-longTitle'>" + oData[i].title + "</span><div><img src=" + oData[i].imageitem[0].image + "/><img src=" + oData[i].imageitem[1].image + "><img src=" + oData[i].imageitem[2].image + "></div><span class='readNum'>" + oData[i].hits + '阅读' + "</span></div></div></li></a>"
}
}
} else {
alert("没有更多的数据")
}
$("#thelist").html(str);
myScroll.refresh();
setTimeout(function () {
$(".cover").fadeOut();
$(".loading").fadeOut();
}, 300);
}
});
}
</script>
</html>
解决方案
不是给你说了 tab 切换的时候 强制让他的scrollTop = 0；
小伙子
这篇关于javascript - 移动端页面新闻列表内容显示不全（页面切换后的位置问题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
