ionic——页面上面固定，下面浮动显示（可滑动）

最新推荐文章于 2022-01-06 14:35:46 发布

原创

最新推荐文章于 2022-01-06 14:35:46 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #固定 #可滑动 #浮动

在 Ionic 项目中遇到页面布局需求，需将标题固定，评论区域实现可滑动。通过将固定内容放入 header，其余部分放入 content 实现此效果，从而创建了一个可滑动的评论区域，而标题始终保持可见。

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

前言

小编最近在做ionic项目的时候，在页面显示的内容上有这么一个需求，要求题目固定，但是评论是可滑动的，下面就是小编的解决办法

<ion-header>
  <ion-toolbar>
    <ion-icon slot="start" color="primary" size="large" name="arrow-back" (click)="goback()"></ion-icon>
    <ion-title>问题</ion-title>
  </ion-toolbar>
  <!-- 标题 -->
  <ion-list style="padding:3% 2%;margin-top:2%;margin-bottom:0%;background-color: white;" p>
    <ion-label style="font-size:18px;font-weight: bold;">{
  
  {problemDetail.name}}</ion-label>
  </ion-list>
  <!-- 问题描述 -->
  <ion-list style="padding:0% 3% 3%;margin:0px;">
    <ion-label style="font-size:16px;">{
  
  {problemDetail.detail}}
    </ion-label>
    <span #id style="display:none">{
  
  {problemDetail.id}}</span>
    <!-- 回答 -->
    <ion-item-divider style="font-size: 12px;margin:0%;colo