您的位置:首页 > Web前端 > JavaScript

js 加载更多时,自动执行加载更多的方法。

2016-03-16 17:22 656 查看
htlm:

<ion-view>
<div class="bar bar-header bar-assertive item-input-inset">
<a class="button button-clear icon ion-ios-arrow-left" ng-click="$ionicGoBack()"></a>
<label class="item-input-wrapper margin-left-20">
<input type="search" placeholder="搜索店铺" ng-model="text">
</label>
<a class="button button-clear icon ion-ios-search" ng-click="gotoSearch()"></a>
</div>
<div class="tenant-select">
<div class="row">
<div class="col-20">
<img src="img/about.png" width="100%" height="100%"/>
</div>
<div class="col-80 tenant-select-p">
<p>
{{detail.productFullName}}
</p>
<p>
<span>
¥{{detail.marketPrice}}
</span>
</p>
</div>
</div>
</div>
<ion-content class="tenant-select-content ">
<ion-refresher pulling-text="" on-refresh="doRefresh()" spinner="ios"></ion-refresher><!--可以下拉刷新了-->
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
<div class="item-divider text-center tenant-select-head">
请选择该商品所在店铺
</div>
<div class="item tenant-select-item">
<div class="row" ng-repeat="items in commoditys" on-finish-render-filters><!--最后字段控制加载完成zj-->
<div class="col-33" ng-repeat="item in items" ui-sref="detail(1)"><!--搜索到的店铺id-->
<div>
<div>
<img ng-src="{{item.logoImage}}" height="100%" width="100%"/>
</div>
<div style="background-color: white; text-align: center">
<p>{{item.productName}}</p>
</div>
</div>

</div>
</div>
</div>
</ion-list>
<!--添加的加载更多功能zj--><!--moreDataCanBeLoaded()的返回值决定了是否显示加载更多-->
<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
</ion-content>

</ion-view>


js代码:

angular.module('controller.tenantSelect', [])

.controller('tenantSelectCtrl', ['$scope', '$stateParams', '$TenantSelectService', '$UserService', '$state', '$DetailService', '$GoodsManageService', '$timeout', '$ionicScrollDelegate', '$Notice', '$TenantHomeService',
function ($scope, $stateParams, $TenantSelectService, $UserService, $state, $DetailService, $GoodsManageService, $timeout, $ionicScrollDelegate, $Notice, $TenantHomeService) {

console.log($stateParams.id);//由跳转页传进来的店铺id
var params = {};
params.productId = $stateParams.id;
params.userid = $UserService.getUser().id;
$DetailService.getItem(params).then(function (result) {//获得商品详情
$scope.detail = result.data;
//console.log(result);

})

//var params = {};//page=1&key=小明&order=asc
//params.page = 1;
//params.key = "小明";
//params.order ="asc";
//$TenantSelectService.store(params).then(function (result) { //暂时调的是搜索店铺的接口,实际应该调用根据商品搜索拥有该商品的店铺接口zj
//    console.log(result);
//    $scope.itemss = result.data;
//    var list = $scope.itemss.results;
//
//
//    //$Notice.loadPopup.close(loading);
//
//    if (result.code == 200) {
//        $scope.commoditys = [];
//        for (var i = 0; i < list.length; i = i + 2) {
//            var items = [];
//            items.push(list[i]);
//            if (list.length > ( i + 1)) {
//                items.push(list[i + 1]);
//            }
//            $scope.commoditys.push(items);
//        }
//    }
//    else {
//        //$Notice.show($scope, "", "网络异常");
//    }
//})

//其实查询页
var startPage = 1;
$scope.getStartPage = function () {
return startPage;
}

$scope.pageNext = function () {
$scope.pageNO = $scope.pageNO + 1;
}

$scope.pageNO = startPage;

$scope.startToFirst = function () {
startToFirst();
}

function startToFirst() {
$scope.pageNO = startPage;
}

//可保证走初始化的方法zj
function initComplete0() {
$timeout(function (result) {
$scope.$broadcast('init.complete0', 'ok');
})
}

initComplete0();//执行后,才能走 $scope.$on('init.complete0', function (event, msg) 初始化方法

//获取店铺商品的方法,由触发的方法调用。zj(等未来接口写好之后,直接更改$GoodsManageService的接口即可)
function loadListByTypeID3(pageNo, storeId, callback) {
var params = {
pageNo: pageNo,
storeId: storeId
}
//获取商品信息
$GoodsManageService.storeProductList(params).then(function (result) {
if (result.code != 200) {
callback(result.code, [])
}
var data = result.data;
$scope.allPage = result.data.totalPage;//获得一共多少页
//console.log("共"+$scope.allPage+"页");
if (data != null) {
callback(result.code, data.list)//此处的list是json中的字段
}
})
}

//初始加载列表页面
$scope.$on('init.complete0', function (event, msg) {
var loading = $Notice.loadPopup.open($scope, "loading...");//加载完成前,显示加载中...
console.log("店铺展示初始化");

var params = {};
params.id = $UserService.getUser().id;
params.createUserId = $UserService.getUser().id;
$TenantHomeService.getTenant(params).then(function (data) {//获得店铺信息,从而获得店铺id
$scope.tenant = data.data;
console.log("店铺展示初始化");
//var params = {};//page=1&key=小明&order=asc
//params.pageNo = 1;
//params.storeId = 59;
loadListByTypeID3($scope.pageNO, $scope.tenant.id, function (code, list) {
console.log(list);

$Notice.loadPopup.close(loading);//关闭进度条

if (code == 200) {
$scope.commoditys = [];
for (var i = 0; i < list.length; i = i + 3) {
var items = [];
items.push(list[i]);
if (list.length > ( i + 2)) {
items.push(list[i + 2]);
if (list.length > ( i + 1)) {
items.push(list[i + 1]);
}
}
$scope.commoditys.push(items);
}
}
else {
$Notice.show($scope, "", "网络异常");
}
});
});

})
//数据加载完成时調用
$scope.$on('ngRepeatFinished', function (event, msg) {
console.log("加載完成manage");
$timeout(function () {

needLoadMore = true; //触动加载更多的方法。(加载更多的方法是在向上滑动时执行的并且needLoadMore为true.并且跟每页的条数有关)
}, 2000);
});

var needLoadMore = false;
//加载更多zj   由html 监听触发
$scope.loadMore = function () {
console.log("加载更多店铺展示");
$scope.pageNO = $scope.pageNO + 1;  //改变页数。实现加载下一页zj
console.info("第" + $scope.pageNO);
if ($scope.pageNO > $scope.allPage) {
needLoadMore = false;
$scope.$broadcast('scroll.infiniteScrollComplete');

//$Notice.show($scope, "", "已全部展示");
return;
}
//console.info("店铺id" + $scope.tenant.id);
loadListByTypeID3($scope.pageNO, $scope.tenant.id, function (code, list) {

if (code == 200) {
//$scope.commoditys = [];
for (var i = 0; i < list.length; i = i + 3) {
var items = [];
items.push(list[i]);
if (list.length > ( i + 2)) {
items.push(list[i + 2]);
if (list.length > ( i + 1)) {
items.push(list[i + 1]);
}
}
$scope.commoditys.push(items);
}

if (list == null || list.length == 0) {
needLoadMore = false;
} else {
needLoadMore = false;
}
}

$scope.$broadcast('scroll.infiniteScrollComplete');

});

//needLoadMore =false;//控制loadMore()方法不再被触发
//$scope.$broadcast('scroll.infiniteScrollComplete');//关闭加载更多进度条
//$ionicScrollDelegate.scrollBottom();//显示最新条目,也包括进度条
}
//由html 监听触发,决定了是否显示加载更多
$scope.moreDataCanBeLoaded = function () {
return needLoadMore;
}

//刷新时调用zj,  由html 监听触发
$scope.doRefresh = function () {
console.log("店铺展示刷新");
$scope.pageNO = 1;
loadListByTypeID3($scope.pageNO, $scope.tenant.id, function (code, list) {
console.log(list);

//$Notice.loadPopup.close(loading);//关闭进度条

if (code == 200) {
$scope.commoditys = [];
for (var i = 0; i < list.length; i = i + 3) {
var items = [];
items.push(list[i]);
if (list.length > ( i + 2)) {
items.push(list[i + 2]);
if (list.length > ( i + 1)) {
items.push(list[i + 1]);
}
}
$scope.commoditys.push(items);
}
$scope.$broadcast("scroll.refreshComplete");//可以手动滑动到最新条目的位置zj
$ionicScrollDelegate.resize();
}
else {
$Notice.show($scope, "", "网络异常");
}
});
//var params = {};//page=1&key=小明&order=asc
//params.pageNo = 1;
//params.storeId = 59;

//$GoodsManageService.storeProductList(params).then(function (result) {
//    console.log(result);
//    $scope.itemss = result.data;
//    var list = $scope.itemss.list;//返回数据中有list字段。
//
//    console.log(list);
//
//    //$Notice.loadPopup.close(loading);
//
//    if (result.code == 200) {
//        $scope.commoditys = [];
//        for (var i = 0; i < list.length; i = i + 3) {
//            var items = [];
//            items.push(list[i]);
//            if (list.length > ( i + 2)) {
//                items.push(list[i + 2]);
//                if (list.length > ( i + 1)) {
//                    items.push(list[i + 1]);
//                }
//            }
//            $scope.commoditys.push(items);
//        }
//    }
//    else {
//        //$Notice.show($scope, "", "网络异常");
//    }
//
//    // Stop the ion-refresher from spinning
//    $scope.$broadcast("scroll.refreshComplete");//可以手动滑动到最新条目的位置zj
//
//    $ionicScrollDelegate.resize();
//    //$ionicScrollDelegate.scrollBottom();//自动显示到最新数据的条目上zj
//})

}
//模拟的数据
$scope.itemss = [

[
{name: ''}, {name: ''}, {name: ''}
],
[
{name: ''}, {name: ''}, {name: ''}
],
[
{name: ''}, {name: ''}, {name: ''}
],

]

}])
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: