zoukankan      html  css  js  c++  java
  • 移动端 H5 上拉刷新,下拉加载

    http://www.mescroll.com/api.html#options

    这里有几个重要的设置

    1、down 下不启用下拉刷新是因为再手机端有默认的下拉刷新,会冲突,待解决

    2、up 中的

      auto 是第一次自动加载;

      page是设置分页的size,一般num不在这里设置

      clearEmptyId 是没有数据时显示提示无数据的容器Id

      callback 是回调地址

     //创建MeScroll对象
                        var mescroll = new MeScroll("mescroll",
                            {
                                down: {
                                    use: false
                                },
                                up: {
                                    auto: true,
                                    page: { size: 5 },
                                    clearEmptyId: "dataList",
                                    callback: upCallback //上拉加载的回调
                                }
                            });
    
                        /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
                        function upCallback(page) {
                            //console.log("upCallback_num:" + page.num);
                            var olddata = null;
                            if (page.num !== 1) {
                                olddata = $scope.orders;
                            }
    
                            $scope.searcher.Page = page.num;
                            $scope.searcher.Rows = page.size;
                            //console.log("Page:" + $scope.searcher.Page + "&Rows:" + $scope.searcher.Rows);
                            $http.post(apiUrl + "api/weixintruck/getlist", $scope.searcher).success(
                                function(data) {
                                    //console.log(data.data);
                                    if (data.code === 200) {
                                        if (data.data.TotalItem > $scope.searcher.CurrentPage * $scope.searcher.PageSize) {
                                            $scope.hasNextPage = true;
                                        } else {
                                            $scope.hasNextPage = false;
                                        }
                                        $scope.orders = data.data.Items;
                                        if (olddata !== null && typeof (olddata) !== "undefined") {
                                            $scope.orders = olddata.concat($scope.orders);
                                        }
    
                                        mescroll.endBySize($scope.orders.length, data.data.TotalItem);
                                    } else {
                                        layer.open({
                                            content: '非法操作',
                                            skin: 'msg',
                                            time: 2 //2秒后自动关闭
                                        });
                                        mescroll.endErr();
                                    }
                                }).error(function() {
                                mescroll.endErr();
                            });
                        }
  • 相关阅读:
    Spring多数据源动态切换
    IntelliJ Idea使用代码格式化,Tab制表符进行缩进
    idea 快捷键
    final关键字的功能概述
    IntelliJ Idea 常用快捷键列表
    Log4j.properties配置详解
    IDEA添加try catch快捷键
    使用 JMeter 进行压力测试
    idea 复制当前行到下一行快捷键
    js父窗口opener与parent
  • 原文地址:https://www.cnblogs.com/ideacore/p/7802351.html
Copyright © 2011-2022 走看看