使用mui进行上拉加载

末蓝、 2021-06-24 16:09 405阅读 0赞

前台JSP代码：

<link rel="stylesheet" href="${ctx}/thisapp/css/mui.min.css" />
    <script src="${ctx}/thisapp/js/mui.min.js"></script>
    <script type="text/javascript">
            var isture =false;  //总共页数
            var currPage=1; //当前页码
            var pagesize=10; //计数器
    
            function getList(){
                $.ajax({
                    url:'/tpf/skel/pageAffairs?pagesize=' + pagesize + "&currentpage=" + currPage,
                    type:'post',
                    dataType:"json",
                    timeout:1000,
                    success:function(res){
                        console.log(res.list)
                        if (res.list[0] != null ){
                            $.each(res.list,function(i,value){
                                 $("#refreshul").append("<li><i></i><a href='/tpf/currentaffairs/lookInfo?id="+res.list[i].id+"'>"+res.list[i].title+"</li>");
                            });
                            currPage++;
                        }else {
                            isture = true;
                        }
                    }
                })
            }
    
            //上拉加载
            mui.init({
                pullRefresh : {
                    container:pull,//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                    up : {
                        height:10,//可选.默认50.触发上拉加载拖动距离
                        auto:true,//可选,默认false.自动上拉加载一次
                        contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                        contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                        callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    }
                }
            });
    
            function pullupRefresh(){
                setTimeout(function(){
                    mui('#pull').pullRefresh().endPullupToRefresh(isture);
                    getList();
                },1000)
            }
    </script>
    
    <div  id="pull" class="content mui-content" style="height: 500px;">
            <div class="mui-scroll">
                <div id="refreshul" class="mui-table-view mui-table-view-chevron">
                </div>
            </div>
        </div>

后台java代码：

public static void pageAffairs(Integer pagesize,Integer currentpage){
            StringBuilder hql = new StringBuilder(" from CurrentAffairs where isShow = 1 order by createTime desc ");
            List<CurrentAffairs> currentAffairs = CurrentAffairs.find(hql.toString()).fetch(currentpage, pagesize);
            Long count = CountrysideTour.count(hql.toString());
            renderJSON(ConvertUtil.convertMap(count, currentpage, currentAffairs));
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

相关 mui 上拉下拉

<div id="pullrefresh"> <ul class="mui-table-view" id

怼烎@/ 2022年11月21日 09:56/ 0 赞/ 192 阅读

相关 vue上拉加载

最近写移动端，需要用到上拉加载的效果，由于我自己写的触摸事件在微信上遇到点小问题，所以还是借用组件来完成了。朋友推荐了这个组件，感觉还不错： vue-impressio

我就是我/ 2022年06月07日 09:39/ 0 赞/ 189 阅读

相关 node+mui实现上拉加载

前端代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

怼烎@/ 2022年05月28日 06:40/ 0 赞/ 193 阅读

相关关于MUI中禁用、启用上拉加载的探索

首先得明白一件事情，那就是MUI提供的禁用和启用的方法是不起作用的。。。 [ “MUI上拉刷新”][_MUI] －＝－＝－＝－＝－＝－＝－＝－＝－＝－文档引用start－

墨蓝/ 2022年05月12日 02:26/ 0 赞/ 392 阅读

相关 MUI实现下拉刷新和上拉加载更多

MUI实现下拉刷新和上拉加载更多 -------------------- 引入相关依赖包  <li

心已赠人/ 2022年05月08日 15:06/ 0 赞/ 301 阅读

相关 mui上拉加载与Picker冲突

项目中碰到有上拉加载和Picker组件共存时，ios 还好，没啥问题，但是安卓的，只要Picker选择的时候上拉，同时触发了 mui的上拉加载。暂时只能想到，在触发Pic

秒速五厘米/ 2022年01月29日 14:27/ 0 赞/ 224 阅读

相关 mui实现上拉刷新与下拉加载功能

引言下拉刷新与上拉加载功能可谓是现在APP开发的两个常见功能，在电脑端我们常常通过点击分页的形式来向用户展示更多内容，不过在移动端我们可不想有这些多余的点击操作，只要想

曾经终败给现在/ 2021年10月19日 03:12/ 0 赞/ 693 阅读

相关 mui上拉刷新下拉加载

废话不多说，直接上代码 1、容器  <div id="refreshContainer" class="mui-content m

Dear 丶/ 2021年09月15日 16:48/ 0 赞/ 443 阅读

相关上拉加载篇

1、如何判断是否已经加载完数据 (1)通过判断页面获取到的数据数量和页面平均获取到的数据判断,比如每个页面返回10条,最后一个页面不到10条 (2)在知道总

悠悠/ 2021年07月24日 20:21/ 0 赞/ 433 阅读

相关使用mui进行上拉加载

前台JSP代码： <link rel="stylesheet" href="${ctx}/thisapp/css/mui.min.css" /> <scr

末蓝、/ 2021年06月24日 16:09/ 0 赞/ 406 阅读