MUI关于上拉刷新和下拉刷新

MUI 是一款优秀的前端框架,主要适用于移动端,对移动端有着完美的支持!
这次要说的是关于APP里面一个非常常见的功能,上拉刷新和下拉刷新问题,大家都知道作为移动端要浏览网页消息,上拉刷新和下拉刷新会变得非常常见!
说白了,上拉刷新其实就是一个分页查询,每次按照一定的条数返回数据,而下拉刷新则是显示最新插入的数据!弄明白这个问题,我们来看MUI怎么实现这个功能的!
其实主要就是下边这段代码
mui.init({
pullRefresh: {
container: ‘#pullrefresh’,
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: ‘正在加载…’,
contentnomore: ‘没有更多订单了’,
callback: pullupRefresh
}
}
});
该代码container主要是定义该jsID,down和up分别表示下拉和上拉
callback里面是具体的function

/*下拉刷新具体业务实现*/
function pulldownRefresh() {
    setTimeout(function () {
            //下拉刷新,新纪录插到最前面;
            table.insertBefore(li, table.firstChild);
        }
        mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
    }, 1500);
}

该代码为下拉刷新的代码,mui(’#pullrefresh’).pullRefresh().endPulldownToRefresh(); //refresh completed 这个js主要的目的是刷新容器,每次下拉的时候都刷新容器

/*上拉加载具体业务实现*/
function pullupRefresh() {
    setTimeout(function () {
        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
        }
    }, 1500);
}

这两个js用于控制上拉和下拉,对于你需要插入的数据来说,下拉是比较简单的,按照后台分页查询,你只需要对pageindex和pagesize这两个值固定就可以得出正确的答案,
但是对于上拉刷新来说,这就比较麻烦了,因为每次你得记录他的pageindex的变化值,比如pagesize=8;按照每次8条数据进行加载,这pageindex每次则按照你查出来数据的条数,变化他的下标,这样在后端分页查询的时候才可以查出来正确的值。而每次下拉的时候,又需要把他的pageindex变化成0,这样你上拉的时候才能保证数据的正确性,当然,这里面还有一个小问题
mui(’#pullrefresh’).pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
当执行这段代码表示没有更多数据的时候,表示你再上拉也不会发送请求了,这个时候如果你还想执行上拉,则需要刷新容器,这个时候就需要执行这段代码 mui(’#pullrefresh’).pullRefresh().endPulldownToRefresh(); //refresh completed
所以这就是这两段代码的来由

没有更多推荐了,返回首页