问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何实现分组列表的吸顶/吸底效果?

头像
HarmonyOS助手
    1574796

    如何实现分组列表的吸顶/吸底效果

    HarmonyOSharmonyosharmonyos-next
    阅读 719
    avatarAI BotBETA

    要实现分组列表的吸顶/吸底效果，你可以使用CSS的position: sticky;属性。以下是一个简单的例子，演示了如何为一个分组列表实现吸顶效果：

    HTML 结构：

    <div class="group">
  <h2>Group 1</h2>
  <div class="sticky-top">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <!-- More items... -->
    </ul>
  </div>
</div>

<div class="group">
  <h2>Group 2</h2>
  <div class="sticky-top">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <!-- More items... -->
    </ul>
  </div>
</div>

<!-- More groups... -->

    CSS 样式：

    .group {
  /* Group styles here */
}

.sticky-top {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 设置吸顶位置 */
  z-index: 1; /* 确保吸顶元素位于其他内容之上 */
}

.sticky-top ul {
  /* List styles here */
}

    在这个例子中，.sticky-top 类使得每个分组内的列表在其父元素（.group）内部滚动时，会固定在顶部。你可以根据需要调整 top 属性来改变吸顶的位置。

    对于吸底效果，你可以将 top 属性改为 bottom，并相应地调整其他样式来实现。

    请注意，position: sticky; 在一些较旧的浏览器中可能不受支持。在使用之前，请确保你的目标浏览器支持该属性。如果不支持，你可能需要寻找其他解决方案或回退策略。

    1 个回答
    得票最新
    头像
    HarmonyOS助手
      1574796

      可通过List组件的sticky属性配合ListItemGroup组件来实现。通过给List组件设置sticky属性为StickyStyle.Header/StickyStyle.Footer。可参考如下代码：

      // xxx.ets 
@Entry 
@Component 
struct ListItemGroupExample { 
  private timeTable: TimeTable[] = [ 
    { 
      title: '星期一', 
      projects: ['语文', '数学', '英语'] 
    }, 
    { 
      title: '星期二', 
      projects: ['物理', '化学', '生物'] 
    }, 
    { 
      title: '星期三', 
      projects: ['历史', '地理', '政治'] 
    }, 
    { 
      title: '星期四', 
      projects: ['美术', '音乐', '体育'] 
    } 
  ] 
 
  @Builder 
  itemHead(text: string) { 
    Text(text) 
      .fontSize(20) 
      .backgroundColor(0xAABBCC) 
      .width("100%") 
      .padding(10) 
  } 
 
  @Builder 
  itemFoot(num: number) { 
    Text('共' + num + "节课") 
      .fontSize(16) 
      .backgroundColor(0xAABBCC) 
      .width("100%") 
      .padding(5) 
  } 
 
  build() { 
    Column() { 
      List({ space: 20 }) { 
        ForEach(this.timeTable, (item: TimeTable) => { 
          ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) { 
            ForEach(item.projects, (project: string) => { 
              ListItem() { 
                Text(project) 
                  .width("100%") 
                  .height(100) 
                  .fontSize(20) 
                  .textAlign(TextAlign.Center) 
                  .backgroundColor(0xFFFFFF) 
              } 
            }, (item: string) => item) 
          } 
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线 
        }) 
      } 
      .width('90%') 
      .sticky(StickyStyle.Header | StickyStyle.Footer) 
      .scrollBar(BarState.Off) 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5 }) 
  } 
} 
 
interface TimeTable { 
  title: string; 
  projects: string[]; 
}

      效果如图所示：
      image.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题