前端开发AngularJS列表上拉加载下拉刷新

手机网站前端开发技巧
网站前端开发之图片
日本网站开发前端

//1、下拉刷新

$scope.doRefresh = function() {
    $ionicLoading.show()
    // var param={code:$window.localStorage[‘code’]};
    chaXunListFactory.getChaxunList(param).then(function(callback) {
        if ((callback.status = 200)) {
            $scope.chaxunList = callback.data.content
            $ionicLoading.hide()
            $scope.$broadcast(‘scroll.refreshComplete’)
            load()
        }
    })
}
load()
//将上拉加载更多放到此方法里,下拉刷新后重新调用此方法,否则:下拉刷新后不能上拉加载
function load() {
    //获取总页数
    var param = { code: $window.localStorage[‘code’] }
    chaXunListPageFactory.getChaxunListPage(param).then(function(callback) {
        if ((callback.status = 200)) {
            // debugger
            var totalPage = callback.data.content
            if (totalPage >= 2) {
                ;/用于激活上拉加载的变量/
                $scope.state = true
                var page = 2 //如果激活上拉,从第二页开始查询
                $scope.loadMore = function() {
                    // debugger
                    var param2 = {
                        code: $window.localStorage[‘code’],
                        page: page,
                    }
                    chaXunListFactory
                        .getChaxunList(param2)
                        .then(function(callback) {
                            if (callback.status == 200) {
                                // debugger
                                if (callback.data.content == ”) {
                                    $scope.state = false
                                } else {
                                    page += 1
                                    // debugger
                                    try {
                                        $scope.chaxunList = $scope.chaxunList.concat(
                                            callback.data.content,
                                        )
                                    } catch (e) {}
                                    $scope.$broadcast(
                                        ‘scroll.infiniteScrollComplete’,
                                    )
                                    console.log(‘上拉加载’)
                                }
                            }
                        })
                }
            } else {
                //如果只有一页数据,则不激活上拉加载更多
                $scope.state = false
            }
        }
    })
}
旅游网站前端开发论文
网站开发前端基础
关于网站前端web开发的题
» 本文来自:前端开发者 » 《前端开发AngularJS列表上拉加载下拉刷新》
» 本文链接地址:https://www.rokub.com/7476.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!