流程为：
从 topic页面 -》 topic_detail 页面
topic页面
topic_detail 页面
topic_detail 页面上 第2次点击的页面上第1次点击的内容还留在上面，第3次点击的内容，前2次都在上面
是怎么回事呢？ 知道的麻烦告知一下，谢谢了。
topic页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>话题</title>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
html,
body,.mui-content{
background-color: #ffffff;
}
#list {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
margin-top: -1px;
line-height:30px;
}
.mui-table-view-chevron .mui-table-view-cell {
padding-right: 45px;
}
.mui-table-view-cell>a:not(.mui-btn) {
position: static;
}
.mui-table-view .mui-table-view-cell img {
max-width: 15%;
width: 15%;
height: auto;
line-height: 29px;
}
.mui-media-body{
white-space: normal;
padding-left: 20px;
}
.mui-ellipsis {
font-size: 14px;
white-space: normal;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">话题</h1>
</header>
<!--下拉刷新容器 -->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul id='list' class="mui-table-view">
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
swipeBack: true,//启用右滑关闭功能
pullRefresh: {
container: '#pullrefresh',
//down: {
//callback: pulldownRefresh
//},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var a = document.getElementById("list");
mui.ajax('http://www.***.cn/***/***.php?',{
data:{
method:'allTopic',
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
for (var i = 0; i < 8; i++) {
var li=document.createElement("li");
li.className = 'mui-table-view-cell mui-media';
li.innerHTML += '<a class="mui-navigate-right" id='+data[i].id+'><img class="mui-media-object mui-pull-left" src="images/topic.png"><div class="mui-media-body">'+data[i].ttitle+'<p class="mui-ellipsis">'+data[i].tdescription+'<br />'+data[i].num+' 篇文章</p></div></a>';
a.appendChild(li);
//下拉刷新，新纪录插到最前面；
//def.appendChild(li);
}
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
/*function pulldownRefresh() {
var self = this;
//setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
mui.ajax('http://www.meck.cn/open/apiup.php?',{
data:{
method:'allArticle',
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
for (var i = cells.length-1, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML += '<a class="mui-navigate-right" id='+data[i+1].id+'><img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg"><div class="mui-media-body">'+data[i+1].title+'<p class="mui-ellipsis">分类：'+data[i+1].cname+' 类型：'+data[i+1].ctype+'</p></div></a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
//}, 1000);
}*/
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
mui.ajax('http://www.***.cn/***/***.php?',{
data:{
method:'allTopic',
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
for(var i = cells.length-1, len = i + 8; i < len; i++){
var li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML += '<a class="mui-navigate-right" id='+data[i].id+'><img class="mui-media-object mui-pull-left" src="images/topic.png"><div class="mui-media-body">'+data[i].ttitle+'<p class="mui-ellipsis">'+data[i].tdescription+'<br />'+data[i].num+' 篇文章</p></div></a>';
table.appendChild(li);
}
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
mui('#pullrefresh').pullRefresh()._endPulldownToRefresh(); //refresh completed
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 0);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
/**
* 下拉刷新具体业务实现 结束
*/
/**
* 打开详情页
*/
//初始化预加载详情页面
mui.init({
preloadPages:[{
id:'topic_detail.html',
url:'topic_detail.html'
}
]
});
var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
var id = this.getAttribute('id');
//获得详情页面
if(!detailPage){
detailPage = plus.webview.getWebviewById('topic_detail.html');
}
//触发详情页面的topicId事件
mui.fire(detailPage,'topicId',{
id:id
});
//打开详情页面
mui.openWindow({
id:'topic_detail.html'
});
});
/**
* 打开详情页结束
*/
//打开子页面
//只有ios支持的功能需要在Android平台隐藏；
if (mui.os.android) {
var list = document.querySelectorAll('.ios-only');
if (list) {
for (var i = 0; i < list.length; i++) {
list[i].style.display = 'none';
}
}
}
mui.init({
preloadLimit: 5, //同时并存的预加载窗口数量
swipeBack: false,
keyEventBind: {
backbutton: false
}
});
var templates = {};
var firstClick = true;
window.addEventListener('firstClick',function () {
firstClick = false;
});
var getTemplate = function(name, header, content, loading) {
var template = templates[name];
if (!template) {
//预加载共用父模板；
var headerWebview = mui.preload({
url:header,
id:name+"-main",
styles:{
popGesture:"hide",
},
extras:{
mType: 'main'
}
});
//预加载共用子webview
var subWebview = mui.preload({
url:!content?"":content,
id:name+"-sub",
styles:{
top: '45px',
bottom: '0px',
},
extras:{
mType: 'sub'
}
});
subWebview.addEventListener('loaded', function() {
if(!firstClick){
setTimeout(function() {
subWebview.show();
}, 50);
}
});
subWebview.hide();
headerWebview.append(subWebview);
//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
headerWebview.addEventListener('hide', function() {
subWebview.hide("none");
});
}
templates[name] = template = {
name: name,
header: headerWebview,
content: subWebview,
loaded: loading
};
}
return template;
};
var initTemplates = function() {
getTemplate('pullrefresh', 'common/template_pullrefresh.html', 'common/pullrefresh.html', true);
getTemplate('default', 'common/template.html','common/accordion.html');
};
mui.plusReady(function() {
//初始化模板
initTemplates(); //预加载所有模板
//关闭splash页面；
plus.navigator.closeSplashscreen();
});
//主列表点击事件
mui('#list').on('tap', 'a', function() {
var id = this.getAttribute('href');
var type = this.getAttribute("open-type");
if (type == "common") {
if (~id.indexOf('')) {
var pop = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
mui.openWindow({
id: id,
url: this.href,
styles: {
zindex: 9998,
popGesture: pop
},
waiting: {
autoShow:true,//自动显示等待框，默认为true
title:'正在加载...',//等待对话框上显示的提示内容
}
});
} else {
mui.openWindow({
id: id,
url: this.href,
waiting: {
autoShow:true,//自动显示等待框，默认为true
title:'正在加载...',//等待对话框上显示的提示内容
}
});
}
} else {
if (id && ~id.indexOf('.html')) {
var href = this.href;
//获得共用模板组
var template = ~href.indexOf('pullrefresh.html')?getTemplate('pullrefresh'):getTemplate('default');
//判断是否显示右上角menu图标；
var showMenu = ~href.indexOf('popovers.html')?true:false;
//获得共用父模板
var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.innerText;
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview,'updateHeader',{title:title,showMenu:showMenu});
var reload = true;
if (!template.loaded) {
if (contentWebview.getURL() != this.href) {
contentWebview.loadURL(this.href);
} else {
reload = false;
}
} else {
reload = false;
}
(!reload) && contentWebview.show();
headerWebview.show('slide-in-right', 150);
if(firstClick){
firstClick = false;
}
}
}
});
</script>
</body>
</html>topic_detail 页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style>
.mui-content{
width:100%;
padding: 20px 0px;
line-height: 30px;
background: #FFFFFF;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="htitle">话题</h1>
</header>
<!--下拉刷新容器 -->
<div class="mui-content">
<!--数据列表-->
<ul id='list' class="mui-table-view mui-table-view-chevron">
</ul>
</div>
<script>
//添加newId自定义事件监听
window.addEventListener('topicId',function(event){
//获得事件参数
var id = event.detail.id;
var a = document.getElementById("list");
//根据id向服务器请求新闻详情
mui.ajax('http://www.***.cn/***/***.php?',{
data:{
id:id
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
var i=0;
while(i<data.count){
var li=document.createElement("li");
li.className = 'mui-table-view-cell';
li.innerHTML += '<a class="mui-navigate-right" id='+data[i][id]+'>'+data[i].title+'</a>';
a.appendChild(li);
i++;
}
//for (var i = 0; i < data.count; i++) {
//var li=document.createElement("li");
//li.className = 'mui-table-view-cell';
//li.innerHTML +='<a class="mui-navigate-right" id='+data[i].id+'>'+data[i].title+'</a>';
//var x="";
//x+=data.title.substring(0, 23)+"-必库社区"; 截取字符串
//x+=data[i].title;
//document.getElementById('list').innerHTML=x;
//a.appendChild(li);
//}
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
});
</script>
</body>
</html>
maijiam (作者)
加上这个a.innerHTML='';可以了，谢谢
2015-04-02 21:09