js 加载更多时,自动执行加载更多的方法。
2016-03-16 17:22
656 查看
htlm:
js代码:
<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: ''} ], ] }])
相关文章推荐
- JavaScript 保留关键字
- JavaScript 运算符 和 常用
- JavaScript 的同源策略
- regJS
- js判断地址转向
- js中判断数据为空
- js原型
- 单源最短路径Dijsktra算法
- Javascript 严格模式(use strict)详解
- JavaScript鼠标移动获取坐标
- JSON与XML的区别比较
- javascript运动入门
- 心得20160316
- web技术类书单2016
- js 字符
- Gson 解析JSON数据
- js从头在来
- 高效率去掉js数组中重复项
- 盘点javascript 正则表达式中 中括号的【坑】
- javascript笔记——点击按钮(或超链接)如何跳转到另外一个页面并执行目标页面的js函数