使用ion-infinite-scroll不能自动加载数据问题之一：使用了自定义样式overflow-y: auto

最新推荐文章于 2024-08-31 13:50:13 发布

ken2999

最新推荐文章于 2024-08-31 13:50:13 发布

阅读量1.2k

点赞数 1

分类专栏： ionic 文章标签： ionic3

本文链接：https://blog.youkuaiyun.com/ken2999/article/details/82491012

版权

ionic 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在使用Ionic框架时，如何解决自定义SCSS样式与ion-content标签自带滚动属性之间的冲突，避免影响无限滚动功能的正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html文件代码：

<ion-content>

 <div class="brands_list">
    
    <div class="brands" *ngFor="let category of category_list">
      {{category}}
    </div>
 </div>

 <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>

scss文件代码

page-brands {
    ion-infinite-scroll-content{
        min-height: 2px !important; 
    }
    .brands_list{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding-bottom: 50px;
        background-color: #f0f0f0;
    }
}

scss文件中样式brands_list自定义over-flow=y的div, 会和ion-content标签（这个标签自带了滚动属性）冲突，造成不能自动加载。