本文介绍了一个使用Ionic框架实现的店铺选择界面的具体实现方式，包括HTML结构与AngularJS交互逻辑。详细展示了如何通过Ionic框架创建顶部导航栏、搜索框、商品信息展示区域，并实现了无限滚动加载、下拉刷新等功能。
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: ''}
],
]
}])
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
