做了一个下拉刷新,上拉加载的功能,上拉加载可以拉动且功能已实现,但是下拉刷新拉不动。详细代码在附件中有。
我测试时在pulldownRefresh()方法中加了console.log(),发现并没有调用到。我初始化swipe:true,但是好像下滑时间没有监听到。请大家帮帮忙看看是怎么回事。@DCloud_MUI_CJH
mui.init({
swipe: true,
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
auto:true,//自动上拉加载一次
callback: pullupRefresh
}
}
});
mui.plusReady(function(){
mui.caipiao.cleara();
//判断系统,如果是ios,webview添加样式
if(mui.os.ios){
plus.webview.currentWebview().setStyle({
scrollIndicator:'none'
});
}else{};
var self = plus.webview.currentWebview();
var spanid = self.spanid;
var categoryname=self.categoryname;
document.getElementById("categoryname").innerHTML=categoryname;
})
//点击事件
mui.ready(function(){
mui("#buttons").on('tap','li',function(){
var url="details.html";
//获取id
var lid = this.getAttribute("id");;
mui.openWindow({
url:url,
id:url,
extras:{
pid:lid,
}
});
})
})
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
console.log(111);
setTimeout(function() {
}, 1500);
}
/**
* 上拉加载具体业务实现
*/
var count = "1";
function pullupRefresh() {
var self = plus.webview.currentWebview();
var spanid = self.spanid;
setTimeout(function() {
mui.caipiao.post(
'/e/cms/article/articlelist',
{
id:spanid,
pageNo:count
},
function(data){
//控制翻页
var list = data.body.page.list;
var no = data.body.pageno;
//最后一个括号里参数为true表示没有更多的数据了
mui('#pullrefresh').pullRefresh().endPullupToRefresh(count>=no);
//动态加载栏目中的文章
for(var i=0;i<list.length;i++){
var divid=data.body.page.list[i].id;
var title = data.body.page.list[i].title;
var updateDate = data.body.page.list[i].updateDate;
var image = data.body.page.list[i].image;
var src = "";
var imageUrl = plus.caipiao.imageUrl;
if(image){
var src =imageUrl+image;
}
var li = document.createElement("li");
li.className = "mui-table-view-cell mui-media";
li.id = divid;
var img = document.createElement("img");
img.src = src;
if(image){
img.className = "mui-media-object mui-pull-right";
}else{
img.style = "display:none";
}
var div = document.createElement("div");
div.className = "mui-media-body";
div.textContent = title;
var p = document.createElement("p");
p.className = "color: gray;font-size: 13px;"
p.textContent = updateDate;
li.appendChild(img);
li.appendChild(div);
div.appendChild(p);
var buttons = document.getElementById("buttons");
buttons.appendChild(li);
}
//下一页
count++;
}
,'json'
);
}, 500);
}
c***@qq.com (作者)
demo中有pullrefresh_main.html和pullrefresh_sub.html两个html页面,您说的双webview好像是在pullrefersh_main.html中启用双击监听那儿写的,我demo中把pullrefresh_main.html删了也不会对pullrefresh_sub.html下拉刷新上拉加载造成影响。在pullrefresh_sub.html中我也没有看到双webview呀。。。
2017-03-21 14:04
c***@qq.com (作者)
刚才我说错了,您说得对,在边做边看模式下只有pullrefresh_sub.html就可以下拉刷新了,在安卓上,必须pullrefresh_main.html和pullrefresh_sub.html两个搭配着才能下拉刷新。。。现在我在想怎么把这两个页面揉成一个页面出来(╯﹏╰)。
2017-03-21 14:36
CJH
回复 c***@qq.com:想整合到一个页面上,可以试试那个单webview下拉刷新的demo,不过那样的话,在低配版的安卓手机上会不流畅,建议老老实实的用双webview..
2017-03-21 14:44