如何在ionic 3中进行水平滚动

2023-03-16前端开发问题

本文介绍了如何在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中进行水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决？

layui要如何改变时间日历布局大小？

无限滚动和 will_paginate 多次附加项目的“下一页"

AngularJS 错误:未知提供者:aProvider <- a

缩放背景图像以适合 ie8 窗口

IE7 (IETEster) 中的@fontface 无法正常工作

热门文章

热门精品源码

最新VIP资源