ionic开发中设置列表ion-list和边界的距离

最新推荐文章于 2021-03-11 18:33:11 发布
原创 最新推荐文章于 2021-03-11 18:33:11 发布 · 5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ionic #cordova

本文介绍在使用Ionic框架进行HTML5应用开发时，如何调整ion-list与边界的间距问题。通过设置ion-content的padding属性，可以实现列表紧贴边界的显示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

初学html5&ionic，很多地方还不是很懂，记录学习过程中遇到的小错误。

我写了一个列表ion-list，但是ion-list和边界总是有一定距离，如图：


解决办法：

ion-content后有一个属性padding，若将该属性设置为true，则会出现上述效果，不设置或设置为false，则list距离边界为零。如下图：








ion-tree-list:用于显示嵌套列表项的离子指令
05-01
您需要添加ion-tree-list作为对Ionic应用程序的依赖项： angular.module('starter', [ 'ionic', 'controllers', 'services', 'ion-tree-list' ]) 在你的controller.js ： $scope.tasks = [ { name: 'fi
ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新-附件资源
03-02
ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新-附件资源
ionic入门之色彩、图标和边距和界面组件：列表
巴黎的妖
08-10 1968
色彩 ionic定义了九种前景/背景/边框的色彩样式，： 可以在任何元素上使用这些样式设置前景和背景颜色：  class="positive-bg energized">... 图标 ionic使用ionicons图标样式库。ionicons采用了TrueType 字体实现图标样式，有超过500个图标可供选择。 使用图标很简单，在元素上声明以下两
ionic-item缩小左右边距的方法ionic5.0版本 修改默认组件样式
qq_29494055的博客
03-11 269
ion-item{ --padding-start: 6px; } https://blog.youkuaiyun.com/weixin_43964866/article/details/108534242参考这个链接里的方法
ionic3 IPX留海适配
weixin_34055910的博客
03-01 1669
解决：使用 safe-area-inset-top等 ios安全区域变量 + meta标签中设置 viewport-fit=cover https://github.com/pengkobe/reading-notes/issues/436 https://stackoverflow.com/questions/46232812/cordova-app-not-dis...
ionic3在ios上顶部导航栏显示不正常--据顶部有空隙条
zuo-yiran的博客
12-08 2277
在项目中遇到这样的问题： 如图： 顶部导航平白多了一道白条，而且这个只是在ios的真机或者是模拟器上才显示，用chrome和android真机是一点问题没有，于是就重新下载了一个tabs项目，运行，也没有问题，一点点儿找原因才发现是因为觉得不需要顶部导航，就给去掉了，于是，解决的办法是： 在页面的<ion-content>内容</ion-content>之上，加上<ion-header><
ionic tabs 和 侧边框
java12345678
10-16 144
index.html &lt;ion-tabs class="tabs-icon-top tabs-stable tabs-color-active-energized" &gt; &lt;ion-tab title="主页" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="home&quo
ionic列表 ion-list 以及高性能的ng-repeat
12-12
### ionic列表 ion-list 以及高性能的 ng-repeat #### 一、ionic列表：ion-list 在移动应用开发中，列表是非常常见的元素之一。Ionic 框架为了方便开发者创建美观且功能丰富的列表，提供了 `ion-list` 组件。通过...
掌握Ionic列表ion-list与高效ng-repeat技巧
2. ion-item成员：ion-item是ion-list中的基本单元，它具有三种预定义的按钮：ion-option-button，即可选按钮，通常作为选项卡或下拉菜单的形式出现。这些按钮默认是隐藏的，当用户通过左右滑动（由can-swipe属性...
ion-content 滚动到底部会遮住一部分视图的解决办法
TryCatch
12-26 4351
ion-content 滚动到底部会遮住一部分视图的解决办法
ionic组件-列表属性
qq_41768447的博客
03-12 675
文章参考来源：ionic中文网(http://www.ionic.wang/components_doc-index-id-259.html) 列表由多行项组成，可以包含文本、按钮、切换、图标、缩略图等等。列表通常包含具有类似数据内容的项，如图像和文本。 列表支持多种交互，包括滑动项以显示选项、拖动以重新排序列表中的项目和删除项目。 普通列表语法格式： <ion-list> ...
Ionic 基本元素（ion-list）
ChaITSimpleLove的博客
03-15 747
【list-item】 <h3>&nbsp;&nbsp; list-item</h3> <ion-list lines="full"> <ion-item *ngFor="let item of list; let i=index;" [routerLink]="['/maws']"> <ion...
ion-item用法收集
涂涂
08-12 3048
ion-list-header,ion-item,[ion-item],ion-item-divider 一个item可以包含文本，图像和其他任何东西。 通常它被放置在列表中，其他item。 它可以轻松刷新，删除，重新排序，编辑等等。 只有在需要通过手势操作item时，才需要将item放在列表中。 它需要一个ItemSliding包装器元素才能被刷新。 有几个元素被认为是项目，
Ionic 列表
刚出生的程序猿
08-19 1281
1.简介　　列表是常用的组织信息的方式，在ionic中，使用ion-list指令声明列表元素，使用ion-item指令声明成员元素。 　　ion-list和ion-item可选的样式如下。 2.ion-list样式1）边框　　我们可以为ion-list添加list-boderless类来实现无边框的列表。<ion-list> <ion-item class="item-divider
ion-content中存在ion-list,在ion-list外固定其他控件位置不滚动
陈冬明与贝格伯格
11-23 5193
重点 ion-content scroll="false"> 然后在 外包裹   ， 此处的height必须有，不然滚动尺寸有问题。 单此时如果底部有tabs，会发现list最后一行被tabs遮住了，一个偷懒的方法就是启用infinite-scroll，把最后一行进行填充，就是增加 。 这时list拉到底会有个loading的icon出现，为了不让这个icon出现，可以设置ion-infini
ionic2 之 List
yanyanforest的专栏
09-05 1191
List 标签例子如下： <!-- 下拉刷新--> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content></ion-refresher-content> </ion-refresher> <!--列表--> <ion-list> <!-- 这里还可以嵌入一个 header，这相当于 tabl
这是一个分割线ionic和react的分界线
https://github.com/xiaohuoni
10-08 3835
从2016年3月1号，我发的第一篇关于ionic的入门攻略到2016年6月28日。 我共发布了20篇入门文章，累计访问人数45705.评论数35. 我说过了，用到什么自学什么，发什么攻略。 从8月份开始，我们公司就不再使用ionic了。 ionic的混合开发我研究不多，我都是研究如何让ionic在微信上能有更好的性能。 不知道我的攻略对大家有没有帮助。 也没个人跟我说过这个事情，本来要
ionic开发中的ion-list设置item右侧的向右箭头
热门推荐
JR的博客
05-24 1万+
1.添加向右箭头的方法：&lt;i class="icon ion-ios-arrow-forward"&gt;&lt;/i&gt;在ion-item中添加上述代码，例：&lt;ion-item ng-repeat="item in items"&gt; {{item}} &lt;i class="icon ion-ios-arrow-forward"&gt;&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jinrui_w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值