如何在ionic 3中进行水平滚动
时间：2023-09-08
本文介绍了如何在ionic 3中进行水平滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
看看我的
我在 ion-scroll 中有 10 个名字，但它会像段落一样进入下一行.
这是我的 .html 代码.
这是我的css
.headerChipGray{ion-chip.chip.chip-md{边距:2px 2px 2px 2px；边框半径:10px；边框:1px 纯灰色；背景:白色；}ion-chip.chip.chip-ios{边距:2px 2px 2px 2px；边框半径:10px；边框:1px 纯灰色；背景:白色；}}.headerChipGreen{ion-chip.chip.chip-md{边距:2px 2px 2px 2px；边框半径:10px；背景:白色；颜色:#A80C50；边框:1px 实心#A80C50；}ion-chip.chip.chip-ios{边距:2px 2px 2px 2px；边框半径:10px；背景:白色；颜色:#A80C50；边框:1px 实心#A80C50；}}<块引用>
更新到 ionic 3 后，这段代码曾在 ionic 2 中工作，我正面临这个问题，我缺少用于 ion-scroll 的 ionic doc
解决方案
看起来像 ion-row 在你的卷轴内包裹着物品.
尝试使用 nowrap 属性.
添加 flex-wrap: nowrap.将列强制为单行.
look at my
I have 10 names in the ion-scroll but it is coming to the next line like a paragraph.
here is my .html code.
<ion-scroll scrollX="true" style="width:100vw; height:50px" >
<ion-row class="headerChip">
<div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'">
<ion-chip (click)="changeData(tabName)">
<ion-label >{{tabName.languagename}}</ion-label>
<div></div>
</ion-chip>
</div>
</ion-row>
</ion-scroll>
here is my css
.headerChipGray{
ion-chip.chip.chip-md{
margin: 2px 2px 2px 2px;
border-radius: 10px;
border: 1px solid gray;
background: white;
}
ion-chip.chip.chip-ios{
margin: 2px 2px 2px 2px;
border-radius: 10px;
border: 1px solid gray;
background: white;
}
}
.headerChipGreen{
ion-chip.chip.chip-md{
margin: 2px 2px 2px 2px;
border-radius: 10px;
background: white;
color: #A80C50;
border: 1px solid #A80C50;
}
ion-chip.chip.chip-ios{
margin: 2px 2px 2px 2px;
border-radius: 10px;
background: white;
color: #A80C50;
border: 1px solid #A80C50;
}
}
this same piece of code used to work in ionic 2 after updating to ionic 3 i am facing this issue what i am missing ionic doc for ion-scroll
解决方案
It looks like ion-row within your scroll is wrapping the items.
Try using nowrap attribute.
Adds flex-wrap: nowrap. Forces the columns to a single row.
<ion-scroll scrollX="true" style="width:100vw; height:50px" >
<ion-row nowrap class="headerChip">
<div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'">
<ion-chip (click)="changeData(tabName)">
<ion-label >{{tabName.languagename}}</ion-label>
<div></div>
</ion-chip>
</div>
</ion-row>
</ion-scroll>
这篇关于如何在ionic 3中进行水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！
相关文章
在 Angular 2/Typescript 中使用 IScrollUse IScroll in Angular 2 / Typescript(在 Angular 2/Typescript 中使用 IScroll)- Anime.js 在 Ionic 3 项目中不起作用anime.js not working in Ionic 3 project(Anime.js 在 Ionic 3 项目中不起作用)
- Angular 2:在本地 .json 文件中找不到文件Angular 2: file not found on local .json file(Angular 2:在本地 .json 文件中找不到文件)
- 将 ViewChild 用于动态元素 - Angular 2 &离子2Use ViewChild for dynamic elements - Angular 2 amp; ionic 2(将 ViewChild 用于动态元素 - Angular 2 amp;离子2)
- 如何在 ionic2 中的 pop() 之后重新加载离子页面How to reload the ion-page after pop() in ionic2(如何在 ionic2 中的 pop() 之后重新加载离子页面)
- 当 Ionic 2 中的值发生变化时检索本地存储值Retrieve localstorage value when value is change in Ionic 2(当 Ionic 2 中的值发生变化时检索本地存储值)