实现了首页
商品分类，广告栏，
分类菜单
<
ion-view view-title="阿哥汇商城" hide-nav-bar="true">
<
ion-header-bar align-title="left" class="bar-balanced">
<div class="buttons">
<!--ui-sref="category"-->
<div class="button icon-left
ion-navicon button-clear" ng-click="toggleCategory()"></div>
<!--<div class="button icon-left
ion-navicon button-clear" ng-click="modal.show()"></div>-->
</div>
<label class="item-input-wrapper" ui-sref="search" style="height: 33px;">
<i class="icon
ion-ios-search placeholder-icon" style="margin: 20px 0px;color: #BBBBBB"></i>
<input class="small-text" type="search" ng-model="searchStr" style="background: transparent;width: 100%"
placeholder="请输入
商品名称">
</label>
<div class="buttons">
<div class="button icon-right
ion-ios-cart-outline button-clear" ng-click="toCart()"></div>
<i class="badge icon-right assertive"
style="height:15px;font-size: 10px;margin-left: -10px;top: -8px;padding:0px 5px;float: inherit;background: #FFFFFF" ng-show="true">{{cartSize}}</i>
</div>
</
ion-header-bar>
<
ion-content scroll="false" ng-show="isCategory" style="height:100%;background-color: rgba(0, 0, 0, 0.50);z-index: 900">
<div style="height: 85%;margin-bottom: 50px;">
<div class="row"
style="width: 100%;height:100%;margin: 0;padding: 0;">
<div class="col-50" style="padding: 0;height: 100%;">
<div class="list" style="padding: 0">
<div class="item item-icon-right item-icon-left" ng-repeat="item in categoryAndProducts"
ng-click="selectItem(item, $index)"
ng-class="{active: activeItem == item}">
<i class="icon balanced" ng-class="iconArr[$index]"></i>
{{item.cat_name}}
<i class="icon
ion-ios-arrow-right balanced" style="font-size: 24px;align-items:center"></i>
</div>
</div>
</div>
<div class="col-50" style="padding: 0;height: 100%;">
<div class="list" style="padding: 0;background: #dedede">
<div class="item active-item item-button-right" ng-repeat="cat in subCategory" ng-click="selectCategory(cat.cat_id)"
style="background: #dedede">
{{cat.cat_name}}
<button class="button button-clear">{{cat.goods_total}}ddd</button>
</div>
</div>
</div>
</div>
</div>
</
ion-content>
<
ion-content class="false" overflow-scroll="true" style="overflow: hidden;">
<!-- <
ion-refresher> 下拉刷新指令 -->
<
ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()" spinner="android"></
ion-refresher>
<
ion-slide-box active-slide="myActiveSlide" auto-play="true" does-continue="true" show-pager="true" slide-interval="2000" ng-if="ads"
style="height: 108px;">
<
ion-slide ng-repeat="ad in ads">
<div class="box blue">
<!--<h1>BLUE</h1>-->
<img src="{{APPCONFIG.picURL}}/{{ad.src}}" style="width: 100%;height:inherit">
</div>
</
ion-slide>
</
ion-slide-box>
<
ion-list style="">
<
ion-item style="padding: 0px;border-color:#FFF">
<!--<h2>{{item.id}}</h2>-->
<div style="height: auto; width:100%;padding: 0">
<div class="row row-center" style="height: 40px;width: 100%;padding: 0;font-size: 16px"
onclick="save($index)">
<i class="icon" style="width: 4px;height: 50%;background: {{colors[0]}}"></i>
<div class="padding" style="width: 100%"><h2 style="font-size: 20px;color:{{colors[0]}}">热门店铺</h2></div>
更多<i class="icon icon-right
ion-ios-arrow-right"
style="font-size: 24px;margin-right: 20px;margin-left: 3px"></i>
</div>
<div class="row row-wrap" style="height:auto; width: 100%;padding: 0;margin-top: 0 ">
<div class="col col-33 img" ng-repeat="image in hotsuppliers"
style="margin: 0px;padding: 7px auto;height: 60px">
<img ng-src="{{APPCONFIG.picURL}}{{image.logo}}" style="height: 45px;width: 90px"/>
</div>
</div>
<div style="background: #F3F3F3;height: 10px;width: 100%"></div>
</div>
</
ion-item>
<
ion-item collect
ion-repeat="item in categoryAndProducts" style="padding: 0;border-color:#FFF">
<!--<h2>{{item.id}}</h2>-->
<div style="height: auto; width:100%;padding: 0">
<div class="row row-center" style="height: 40px;width: 100%;padding: 0;font-size: 16px"
ng-click="selectCategory(item.cat_id)">
<i class="icon" style="width: 4px;height: 50%;background: {{colors[(item.cat_id%5)]}}"></i>
<div class="padding" style="width: 100%"><h2 style="color: {{colors[(item.cat_id%5)]}};font-size: 20px">
{{item.cat_name}}</h2></div>
更多<i class="icon icon-left
ion-ios-arrow-right"
style="font-size: 24px;margin-right: 20px;margin-left: 3px"></i>
</div>
<div class="row row-center" style="padding: 0;margin-top: 0">
<div class="col-33" ng-repeat="product in item.goods" style="padding: 5px"
ng-click="goProductDetail(product.goods_id)">
<div class="img" style="width: 100%">
<img class="item-product-img" ng-src="{{APPCONFIG.picURL}}/{{product.goods_thumb}}"
style="width: 90px;height: 90px">
<div class="desc"
style="text-overflow: ellipsis;white-space:nowrap; overflow:hidden;font-size: 16px;margin-top: 5px">
{{product.goods_name}}
</div>
<div style="background: #DEDFE0;height: 1px;margin: 2px"></div>
<div class="desc assertive" style="text-overflow: ellipsis;overflow:hidden;font-size: 16px"><b>{{product.price
| currency:"￥"}}</b></div>
</div>
</div>
</div>
<div style="background: #F3F3F3;height: 10px;width: 100%"></div>
</div>
</
ion-item>
</
ion-list>
</
ion-content>
本文档详细介绍了如何使用Ionic4.x框架创建一个商品列表页面，包括从京东API动态请求数据，页面间传值，商品列表布局，上拉加载更多功能的实现。重点讲解了通过ActivatedRoute获取URL查询参数并根据分类ID请求不同商品数据，以及解决图片相对路径问题的方法。
订阅专栏 解锁全文
扫一扫
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
