mescroll分页(单纯的分页,没有搜索值等部分)

首先需要引入mescroll.min.css和mescroll.min.js
(注意:如果使用jquery需要引入jquery.min.js)
mescroll分页官网:http://www.mescroll.com/api.html#tagUpCallback

mescroll分页(body部分)


    <div class="mescroll" id="mescroll">
         <!-- 内容部分 -->
         <div class="content" id="dataList">

         </div>
    </div>

mescroll分页(js部分)


        $(function() {
            var id = null;
            var search = getQueryString('title') || '';
            $('#search_input').val(search);

            //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
            var mescroll = new MeScroll("mescroll", {
                //上拉加载的配置项
                up: {
                    callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    empty: {
                        tip: "暂无相关数据~", //提示
                    },
                    page: {
                        num: 0,
                        size: 15,
                        time: null
                    },
                    toTop: { //配置回到顶部按钮
                        src: "/static/index/images/top.png", //默认滚动到1000px显示,可配置offset修改
                        offset: 800
                    },
                    clearEmptyId: "dataList" //相当于同时设置了clearId和empty.warpId; 简化写法;默认null
                }
            });

            //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
            /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
            function getListData(page) {
                //联网加载数据
                getListDataFromNet(search, page.num, page.size, function(curPageData, totalSize) {
                    //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                    mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
                    //设置列表数据
                    setListData(curPageData);
                }, function() {
                    //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    mescroll.endErr();
                });
            }

            /*设置正文内容,*/
            function setListData(curPageData) {
                var content = $('.content');
                for (var i = 0; i < curPageData.length; i++) {
                    var p = curPageData[i];

                    var str = '<div class="product" id="' + p.id + '">' +
                        '<div class="product-name">' + p.name + '</div>' +
                        '</div>';
                    content.append(str);
                }
            }
            /*联网加载列表数据
                      参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
                      * */
            function getListDataFromNet(search, pageNum, pageSize, successCallback, errorCallback) {
                $.ajax({
                    type: 'post',
                    url: '/Index/Index/getList',
                    data: {
                        page: pageNum,
                        num: pageSize
                    },
                    dataType: 'json',
                    success: function(response) {
                        //console.log(response);
                        var listData = response.data;
                        var totalSize = response.count;
                        if (response.code == 0) {
                            //回调
                            successCallback(listData, totalSize);
                        }

                    },
                    error: errorCallback
                });
            }

        });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值