html下拉加载是转圈圈,下拉刷新一直处于加载状态

该代码段展示了如何使用mui库在网页中实现上拉和下拉刷新功能,以动态加载和更新内容。通过mui.init()初始化配置,设置回调函数处理数据加载,并在plusReady事件中调用loadData函数。pulldownRefresh和pullupRefresh函数分别处理下拉刷新和上拉加载更多的操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

贴代码,望大神修改

var currentPage=1;

mui.init({

pullRefresh : {

container:"#refreshContainer",//上拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等

down : {

contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容

contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容

contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容

callback :pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;

},

up : {

contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容

contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;

callback :pullupRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;

}

}

});

mui.plusReady(function(){

var param=null;

loadData(param,currentPage,true);

});

function pulldownRefresh(){

var currentPage=1;

loadData(currentPage,true);

mui('#refreshContainer').pullRefresh().endPulldownToRefresh();

}

function pullupRefresh(){

currentPage++;

loadData(currentPage,true);

}

function loadData(param,currentPage,refresh){

mui.ajax(base_api_url+'/Interface/Activity/SelectActivity.aspx?PageIndex='+currentPage,{

dataType:'json',//服务器返回json格式数据

type:'get',//HTTP请求类型

success:function(data){

// var Pic=plus.storage.setItem("data[i].Pic");

//获得服务器响应

// mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);

// mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);

var html='';

for(var i=0; i

var param=data[i].Id;

if(data[i].Pic!=''){

var picHtml='';

}else{

var picHtml='';

}

html+='

'

+'

'+picHtml+'
'

+'

'

+'

'+data[i].Title+'
'

+'

'+data[i].StartTime+'
'

+'

'

+'

+'

'

}

if (refresh) {

//下拉刷新

$('#content').html(html);

mui('#refreshContainer').pullRefresh().endPulldownToRefresh();

} else {

// 上拉加载

currentPage++;

$('#content').append(html);

mui('#refreshContainer').pullRefresh().refresh(true);

}

}

});

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值