ionic5列表组件

前言

在ionic前端开发中,我们常常需要使用列表组件来实现列表的功能,而ionic就很好的包装了一组列表组件用于实现列表的功能,ionic中的列表组件主要是ion-list、ion-item等组件,下面我们就利用代码来看一下是具体使用;想要了解更多的ionic列表的使用可以参考网址:https://ionicframework.com/docs/api/list

普通列表

新建页面并展示

首先我们使用语句ionic g page list新建页面
然后我们在src\app\list\list.page.ts文件中新增一个list数组,并循环添加数字如下:
在这里插入图片描述
接着我们就可以在页面src\app\list\list.page.html中使用列表将list展示出来
在这里插入图片描述

带箭头的列表

如果我们需要一个带连接箭头的列表可以添加链接
在这里插入图片描述
最后显示如下:
在这里插入图片描述

line

我们可以设置列表下面的线条的类型,其类型有"full" | “inset” | “none” | undefined四种
在这里插入图片描述
在这里插入图片描述

分组列表ion-item-divider

在软件中,我们常常可以看到对列表进行分组,例如以字母分组等等,这时就可以用到ion-item-divider了,代码如下
在这里插入图片描述
这段代码中,我们将列表分成了A、B两组,页面展示效果如下:
在这里插入图片描述

列表中带图标ion-icon

如果我们想在列表中带图标,只需要加入ion-icon即可
在这里插入图片描述
代码中,ion-icon中的slot设置图标在左还是在右,name设置图标名称,这个可以去icon图标库https://ionicons.com/中查找,还可以设置其颜色等等,效果如下:在这里插入图片描述

列表中带头像ion-avatar

想要实现列表中带头像,我们可以使用ion-avatar来实现
在这里插入图片描述
其中slot设置头像位置在左还是右,里面的img中的src设置头像路径,我们一般将图片放置于assets下
在这里插入图片描述
注意src不用设置…/asssets,直接用/assets就可以了
效果如下:
在这里插入图片描述

列表中的图片ion-thumbnail

想要在列表中设置图片,就需要用到ion-thumbnail
在这里插入图片描述
在这里插入图片描述
其设置方式与头像设置基本一致,展现在页面上如下:
在这里插入图片描述

滑动列表组件ion-item-sliding、ion-item-options等

使用滑动列表组件,我们需要用到ion-item-sliding、ion-item-options等
在这里插入图片描述
在这里插入图片描述
其中,ion-item-options滑动弹出的菜单組,其side则设置菜单组是左滑弹出还是右滑弹出;ion-item-option为滑动弹出的具体菜单,页面展示效果如下
左滑:
在这里插入图片描述
右滑:
在这里插入图片描述

实现了首页商品分类,广告栏,分类菜单 <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 collection-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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值