- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我想要的是适合设备屏幕的 ion-content 。我想减少或扩展 ionic 内容而不是滚动。
目前,我的页面在 chrome 设备工具栏中显示为 Iphone 5 的下图。另一方面,由于设备屏幕尺寸的原因,一切看起来都非常适合 Iphone X。
我有以下 HTML:
<ion-content padding class="card-background-page " no-bounce>
<ion-row>
<ion-col (click)="goPage(4)">
<ion-card>
<img src="assets/imgs/kid.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
</ion-col>
<ion-col (click)="goPage(4)">
<ion-card>
<img src="assets/imgs/kid.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col (click)="goPage(4)">
<ion-card>
<img src="assets/imgs/kid.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
</ion-col>
<ion-col (click)="goPage(4)">
<ion-card>
<img src="assets/imgs/kid.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col (click)="goPage(4)">
<ion-card>
<img src="assets/imgs/kid.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
</ion-col>
<ion-col (click)="goPage(4)">
<ion-card>
<img src="assets/imgs/kid.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
</ion-col>
</ion-row>
</ion-content>
CSS
page-menu {
.hr{
border: 0;
clear:both;
display:block;
width: 96%;
background-color:#f3f6db;
height: 1px;
}
.card-background-page {
ion-card {
position: relative;
text-align: center;
background-color: transparent;
}
.card-title {
top: 74%;
font-size: 2.0em;
width: 100%;
color: #fff;
font-family: auto;
}
.card-subtitle {
font-size: 1.0em;
position: absolute;
top: 52%;
width: 100%;
color: #fff;
}
}
}
StackBlitz 网址:here
您的建议或指示是什么?谢谢。
最佳答案
所以问题是它的响应不够快,在 ionic 3 应用程序中获得响应可能很棘手,因为在该页面中你有 ion-content
至极有.scroll-content
和 .fixed-content
在内部,选项卡也不会“向上推”内容,ionic 只是向内容添加精确数量的边距,因此它不会与页脚冲突。
所以这是我所做的:
HTML:
<ion-content class="card-background-page">
<div class="buttons">
<ion-card>
<img src="https://i.imgur.com/YpXomyN.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
<ion-card>
<img src="https://i.imgur.com/YpXomyN.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
<ion-card>
<img src="https://i.imgur.com/YpXomyN.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
<ion-card>
<img src="https://i.imgur.com/YpXomyN.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
<ion-card>
<img src="https://i.imgur.com/YpXomyN.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
<ion-card>
<img src="https://i.imgur.com/YpXomyN.png"/>
<div class="card-title">Lorem Ipsum</div>
</ion-card>
</div>
</ion-content>
CSS:
page-home {
ion-content{
background: url('https://i.imgur.com/olLunTc.jpg')no-repeat fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.scroll-content {
overflow-y: hidden;
}
.card-background-page {
.buttons {
display: grid;
grid-template: repeat(3, 1fr) / repeat(2, 1fr);
height: calc(100vh - 55px); // i've added this number of pxls, but you can inspect and get the exact amount of the tab footer
}
ion-card {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
background-color: transparent;
img {
width: 80%;
}
.card-title {
font-size: 2rem;
width: 100%;
color: #fff;
font-family: auto;
}
}
}
}
所以首先我从您的代码中删除了 ionic 网格,而是使用 CSS 网格来完成这项工作。 Ionic grid 很好,它作为响应式网格做得很好,但你无法控制它,所以对于这个 CSS 网格更好。
我创建了一个类为 buttons
的 div持有“菜单”,它有一个计算高度,所以它可以适应整个内容删除标签高度。仅此一项就可以使您的内容只延伸到该区域。
因此卡片将尊重 CSS 网格的行和列,现在的工作是使图像和文本具有响应性,这很容易使用 %
图片和rem
对于文本。
我已经询问了该菜单中的元素数量,因为如果超过 6 个元素,它看起来会很奇怪,您需要修改 grid-templates
的第一个参数中的行数。 .所以 8 个或更多元素会使图像变小,并且取决于你想要显示的内容,它不会很好,在这种情况下我建议删除图像,你甚至可以将所有元素放入数组并使用和有条件地显示它仅当array.length <= 6
, 像
.TS
public menu: any[] = [{img: "url", text: "menu text"}, ...];
HTML
<ion-card *ngFor="let item of menu">
<img [src]="item.img" *ngIf="menu.length <= 6"/>
<div class="card-title">{{item.text}}</div>
</ion-card>
这就是我想出的,很抱歉耽误了时间,希望这对您有所帮助 :D
关于css - ionic 如何固定 ion-content 以填充设备屏幕尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53416280/
什么是 SASS 方法要求干燥这样的东西: .content p, .content ul, .content li, .content a 最佳答案 这 4 个元素都有共同的样式吗? .conten
我正在评估 Contentful.com 作为 Angular SPA 的内容引擎。 我面临的问题是按内容类型检索条目(例如,获取“博客”类型的所有条目)。如 documentation exampl
在我编辑的主 wiki 上有一个名为 Item: 的自定义命名空间,提示是该命名空间内的每个页面都显示为 Item:This_item - - Item:That_item -- Item:Foo_i
我正在尝试编写一个Python脚本,可以将图片和pdf上传到WordPress。我希望图像上传到文件夹‘/wp-Content/Uploads/’,将pdf文件上传到文件夹‘/wp-Content/U
是否可以监控进行了多少次 Contentful API 调用,并理想地在即将超过配额时收到通知? 谢谢 最佳答案 当然,您可以在右侧用户配置文件的下拉菜单 > Organizations and Bi
我在尝试在 IE8 中下载带有分号的文件名时遇到问题。 Response.AddHeader("Content-Disposition", "attachment; filename=\"" + at
我在 Contentful Delivery API 中运行查询以返回基于它的 slug 的特定页面项目。这个查询还设置了语言环境,以便它只返回我需要呈现的语言的数据。 但是,我还需要设置页面的 hr
我有兴趣使用 Gatsby建一个Netlify使用来自 Contentful 的内容的静态网站 Netlify 有这个不错的 Gatsby 入门指南: https://www.netlify.com/
目标是提交一个 git 分支。分支的“git status”的输出是: On branch zeromq_new Your branch is up to date with 'origin/zero
我目前正在学习在 ASP.NET 3.5 和 C# 中使用 MasterPages 和 ContentPlaceHolders - 现在,我正在拼命尝试通过我的编程代码编辑 asp:Content-C
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
我使用 bootstrap 3 作为我的网格框架和 CSS 来创建一个具有一个倾斜/倾斜边缘的半透明区域,但由于分层不透明度,我的元素遇到了问题。 期望是中心是倾斜的,但右侧仍然是正方形。 有没有更好
IllegalArgumentException: 未知 URL 内容:// ^ 对上述内容做了噩梦。我检查了我的变量和路径,但看不出问题是什么?非常感谢任何指点! 这是我的痕迹。 java.lan
我有两个元素:一个是 元素,另一个是 元素。 populated-drop-down extends drop-down ,但是,正如您可能已经猜到的那样,它会尝试使用一些选项预先填充它。假设我可以简
我想我也有同样的问题。 Using multiple yields to insert content 我尝试了这个解决方案。我试过 在我的 application.html.erb 中有 conte
此链接 ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) 表示 justify-content 和 align-content 的
我现在正在探索绑定(bind),并且有一个 NSPopUpButton - 它为我提供了一些值选择下的绑定(bind)选项 - Content , Content Objects , Content
正在尝试在内容页面中加载内容 View 。当我运行代码时,它不会出现在我的内容 View 中。我正在从我的内容页面分配两个可绑定(bind)参数。 内容页面: 内容 View :
我想从我的 :before 标签中获取 content。我知道有些人会说它不是真正的(伪)元素,但在 JS 中有一种方法,但有人可以帮助我在 JQ 中做到这一点,因为我有多个标签并且我想用 $.eac
我创建了一个.sh脚本,并将结果记录在一个文件中,执行后我会尝试将文件内容作为mail正文发送。 这是我运行的命令: sh update.sh >> update.$(date +"%Y-%m-%d:
我是一名优秀的程序员,十分优秀!