关于列表有和详细页的加载显示问题，总的就是第一次点击详细页后，能正常显示，以后每次点击详细页都显示前一页的内容然后在用当前的数据，我的实现如下：
列表页js:
<script>
var newp=1,t=0,isend='no';
mui.init({
preloadPages:[{
id:'xmshow.html',
url:'xmshow.html'
}
],
pullRefresh: {
container: '#pullrefresh',
up: {
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了',
callback: pullupRefresh,
}
}
});
var detailPage = null;
//添加列表项的点击事件
mui('#listdate').on('tap', 'a', function(e) {
var id = this.getAttribute('id');
//获得详情页面
if(!detailPage){
detailPage = plus.webview.getWebviewById('xmshow.html');
}
//detailPage.clear();
//触发详情页面的newsId事件
mui.fire(detailPage,'newsId',{
id:id
});
//打开详情页面
mui.openWindow({
id:'xmshow.html',
url:'xmshow.html',
show: {
aniShow: 'fade-in'
}
});
});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
if(isend=="no"){
mui('#pullrefresh').pullRefresh().endPullupToRefresh(isend === "ok"); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
loaddatelist.xmlist(newp, t, function(rs) {
if(rs.status===1){
var datalist=rs.list;
var datacount=datalist.length;
for (var i=0; i<datacount; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right" id="'+datalist[i]['id']+'" href="xmshow.html"><img class="mui-media-object mui-pull-left" src="'+datalist[i]['picurl']+'"><div class="mui-media-body">'+datalist[i]['title']+'<p class="mui-ellipsis">'+datalist[i]['desc']+'</p><p class="mui-ellipsis">价格:'+datalist[i]['price']+'</p><p class="mui-ellipsis">时间:'+datalist[i]['xmtime']+datalist[i]['timedw']+' 原价:'+datalist[i]['price1']+'</p></div></a>';
table.appendChild(li);
}
newp=rs.newp;
}else{
mui.toast(rs.msg);
}
isend=rs.isend;
if(isend === "ok"){
mui('#pullrefresh').pullRefresh().endPullupToRefresh(isend === "ok");
}
});
}else{
mui('#pullrefresh').pullRefresh().endPullupToRefresh(isend === "ok");
}
//mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
}, 1200);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>详细页js如下：
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
var id;
window.addEventListener('newsId',function(event){
id = event.detail.id;
loaddatelist.getonexm(id,function(rs) {
if(rs.status){
var dateone=rs.datalist;
document.getElementById("htitle").innerHTML=dateone.title;
document.getElementById("hlogo").src=hosturl+dateone.picurl;
document.getElementById("img_title").innerHTML=dateone.desc;
document.getElementById("xmjs").innerHTML=dateone.info;
document.querySelector('#txtcontent').classList.remove('mui-hidden');
document.querySelector('#loader').classList.add('mui-hidden');
//var xmbz=dateone.xmbz;
//var xmcp=dateone.xmcp;
//mui.toast();
}
});
mui('#scroll').scroll();
// mui.back = function() {
// var current = plus.webview.currentWebview();
// document.getElementById("htitle").innerHTML='';
// document.getElementById("hlogo").src='';
// document.getElementById("img_title").innerHTML='';
// document.getElementById("xmjs").innerHTML='';
// //current.close();
// }
});
var slider = mui("#slider,#slider1");
slider.slider({
interval: 5000
});
</script>代码有点乱，见谅哈
要怎么才能实现每次访问不出现以前的内容哦.....
5 个回复
太阳神
要么返回时重置内容，要么返回时清除内容，但你试过后就会发现另外一个问题......先不说了~
海哥一号 (作者)
真的发现hb有时候很奇怪
下面代码，第一次点进去，有内容，第二次点进去，就没内容了，好操蛋...
lucida
这个问题,,使用 官网mui 里面的代码,都 出现白页 或者 正常 或者 转圈 或者 白页...官方都没人解决?
Pmc_Fizz - 革命尚未成功，通知仍需努力。
这是一个深坑啊 我也在用列表页跳到 详情页 怎么都搞不定啊
maq
这种应用场景，本质上就不是用“预加载”能解决的问题。
预加载的适用场景是：用户点击之前就能确定点击后应该显示的内容，从而预先加载好，等用户点击的时候，就可以“瞬间”显示出来了。
而所谓“详情”页，在用户点击列表中的某一项之前，是不知道该显示什么的，而当用户点击之后，虽然 webview 能够“瞬间”显示出来，但内容本身总归是要通过 http 获取到的，这个时间省不掉，那么在这段时间里显示什么呢？当然题主的程序是看到了上一次残留的内容，然后再被替换成新的内容，这个体验当然不好。好一点的做法是先采用某种能够“瞬间”改写 webview 内容的方法把页面修改成“等待加载”的提示，然后等 http 响应到来后再被替换掉。
至于具体的实现方法，从题主给出的程序出发，只要在 loaddatelist.xmlist() 之前把上一次残留的内容清理掉就可以了。甚至可以像一楼所说，在前一次页面返回的时候就先把页面内容重置掉。