实现了首页商品
分类，广告栏，
分类菜单
<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="marg
in: 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
-outl
ine button
-clear"
ng-click="toCart()"></div>
<i
class="badge icon
-right assertive"
style="height:15px;font
-size: 10px;marg
in-left:
-10px;top:
-8px;padd
ing: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%;marg
in-bottom: 50px;">
<div
class="row"
style="width: 100%;height:100%;marg
in: 0;padd
ing: 0;">
<div
class="col
-50" style="padd
ing: 0;height: 100%;">
<div
class="
list" style="padd
ing: 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="padd
ing: 0;height: 100%;">
<div
class="
list" style="padd
ing: 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 pull
ing
-text="下拉刷新" on
-refresh="doRefresh()" sp
inner="android"></ion
-refresher>
<ion
-slide
-box active
-slide="myActiveSlide" auto
-play="true" does
-cont
inue="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="padd
ing: 0px;border
-color:#FFF">
<!
--<h2>{{item.id}}</h2>
-->
<div style="height: auto; width:100%;padd
ing: 0">
<div
class="row row
-center" style="height: 40px;width: 100%;padd
ing: 0;font
-size: 16px"
onclick="save($
index)">
<i
class="icon" style="width: 4px;height: 50%;background: {{colors[0]}}"></i>
<div
class="padd
ing" 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;marg
in-right: 20px;marg
in-left: 3px"></i>
</div>
<div
class="row row
-wrap" style="height:auto; width: 100%;padd
ing: 0;marg
in-top: 0 ">
<div
class="col col
-33 img"
ng-repeat="image
in hotsuppliers"
style="marg
in: 0px;padd
ing: 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 collection
-repeat="item
in categoryAndProducts" style="padd
ing: 0;border
-color:#FFF">
<!
--<h2>{{item.id}}</h2>
-->
<div style="height: auto; width:100%;padd
ing: 0">
<div
class="row row
-center" style="height: 40px;width: 100%;padd
ing: 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="padd
ing" 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;marg
in-right: 20px;marg
in-left: 3px"></i>
</div>
<div
class="row row
-center" style="padd
ing: 0;marg
in-top: 0">
<div
class="col
-33"
ng-repeat="product
in item.goods" style="padd
ing: 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;marg
in-top: 5px">
{{product.goods_name}}
</div>
<div style="background: #DEDFE0;height: 1px;marg
in: 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>
本文介绍了如何在Ionic中创建一个多级分类列表，通过获取一级、二级和三级分类数据并遍历来实现。使用ng-class处理选中状态，通过模拟数据获取过程来展示列表。文章还提到了可扩展性优化，如数据缓存和本地存储，适用于电商等项目的多级分类场景。
订阅专栏 解锁全文
扫一扫
4878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
