問題描述
看看我的
我在 ion-scroll 中有 10 個名字，但它會像段落一樣進(jìn)入下一行.
這是我的 .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 在你的卷軸內(nèi)包裹著物品.
嘗試使用 nowrap 屬性.
添加 flex-wrap: nowrap.將列強(qiáng)制為單行.
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>
這篇關(guān)于如何在ionic 3中進(jìn)行水平滾動的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！