问题描述
我一直在尝试在离子2页面中实现水平滚动。但内容总是垂直滚动。
I have been trying to implement horizontal scroll in ionic 2 page. But the content always gets vertically scrolled.
我尝试通过设置'overflow-x to scroll'来编写自己的css。但它没有用。我还通过设置'scrollX = true'来尝试离子的离子滚动组件。但整个内容都被隐藏了。即在页面上根本看不到它。下面是我用于离子滚动的示例代码。不知道我到底错过了什么。
I tried writing my own css by setting 'overflow-x to scroll'. But it didn't work. I also tried ionic's ion-scroll component by setting 'scrollX= true'. But the entire content got hidden. i.e it was not visible on the page at all. Below is the sample code i used for ion-scroll. Not sure what exactly i am missing here.
有关这方面的任何指导吗? (我是Ionic 2和CSS的新手。很抱歉,如果问题太简单了。)
Any guidance on this pls?. (I am new to Ionic 2 and CSS. So sorry if the question is too simple.)
<ion-navbar *navbar primary>
<ion-title>
Title
</ion-title>
</ion-navbar>
<ion-content>
<ion-scroll scrollX="true">
<ion-card>
<ion-card-content>
content
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
content
</ion-card-content>
</ion-card>
</ion-scroll>
</ion-content>
推荐答案
我用几种离子成分实现了水平滚动:
I achieved the horizontal scroll with several ionic components:
离子头像可滚动HTML
<ion-content>
<ion-row>
<ion-item no-lines>
<ion-scroll scrollX="true" scroll-avatar>
<ion-avatar>
<img src="../../assets/whatever.png" *ngFor="let avatar of avatars" class="scroll-item"/>
</ion-avatar>
</ion-scroll>
</ion-item>
</ion-row>
</ion-content>
离子图标可滚动HTML
<ion-content>
<ion-row>
<ion-item no-lines>
<ion-scroll scrollX="true">
<ion-icon *ngFor="let avatar of avatars" name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
</ion-scroll>
</ion-item>
</ion-row>
</ion-content>
SCSS
ion-scroll[scrollX] {
white-space: nowrap;
height: 120px;
overflow: hidden;
.scroll-item {
display: inline-block;
}
.selectable-icon{
margin: 10px 20px 10px 20px;
color: red;
font-size: 100px;
}
ion-avatar img{
margin: 10px;
}
}
ion-scroll[scroll-avatar]{
height: 60px;
}
/* Hide ion-content scrollbar */
::-webkit-scrollbar{
display:none;
}
这对我的离子3.2.0版本起作用。
That worked for me with ionic 3.2.0 version.
这篇关于离子2中的水平滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!