HarmonyOS 鸿蒙Next中如何实现 Swiper 和 Grid 相结合的效果

HarmonyOS 鸿蒙Next中如何实现 Swiper 和 Grid 相结合的效果 是 横向滚动菜单，中间是网格布局，底部有指示器的点，在 Swiper 中嵌套 Grid 布局，比如 Swiper 一页有8条数据，现在一共有15条，那么 Swiper 有两页，在 Swiper 如果要循环遍历，只能用 foreach 吗，这个 foreach ，数据源是 map 的，key是页码，value 是数组，即每一页的8条数据，但是 foreach 不支持map，该如何写，或者说有什么好的方案

3 回复

  1. 循环遍历只能用ForEach

  2. ForEach只支持数组，可以把数据源map 转换成 数组包含对象

更多关于HarmonyOS 鸿蒙Next中如何实现 Swiper 和 Grid 相结合的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过Swiper和Grid组件结合来实现滑动切换网格布局的效果。以下是实现步骤：

  1. 使用Swiper组件包裹Grid组件：将Grid组件放置在Swiper组件内部，每个Swiper的页面项对应一个Grid布局。

  2. 配置Swiper属性：设置Swiper的index、autoPlay、interval等属性，控制滑动行为和自动播放功能。

  3. 配置Grid属性：在每个Swiper页面中，使用Grid组件定义网格布局，设置columnsTemplate、rowsTemplate等属性，控制网格的行列分布。

  4. 数据绑定：通过数据绑定方式，将数据源与Grid组件关联，动态生成网格内容。

示例代码片段如下：

@Entry
@Component
struct SwiperWithGrid {
  private data: string[] = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7', 'Item8']

  build() {
    Swiper() {
      ForEach(this.data, (item: string, index: number) => {
        Grid() {
          ForEach(this.data, (subItem: string) => {
            GridItem() {
              Text(subItem)
                .fontSize(16)
                .textAlign(TextAlign.Center)
            }
          })
        }
        .columnsTemplate('1fr 1fr')
        .rowsTemplate('1fr 1fr')
      }
    }
    .autoPlay(true)
    .interval(3000)
  }
}

此代码实现了一个Swiper组件，每个页面包含一个Grid网格布局，网格内容为动态生成的数据项。Swiper支持自动播放，每3秒切换一次页面。

在HarmonyOS鸿蒙Next中，可以通过Swiper组件嵌套Grid组件实现滑动切换网格布局的效果。首先，在Swiper中添加多个Grid，每个Grid代表一页内容。通过Swiper的滑动功能切换不同的Grid页面。示例代码如下：

<Swiper
  loop={false}
  indicator={true}
>
  <Grid
    columnsTemplate="1fr 1fr 1fr"
    rowsTemplate="1fr 1fr"
  >
    <!-- 第一页的Grid内容 -->
  </Grid>
  <Grid
    columnsTemplate="1fr 1fr 1fr"
    rowsTemplate="1fr 1fr"
  >
    <!-- 第二页的Grid内容 -->
  </Grid>
</Swiper>

通过调整columnsTemplate和rowsTemplate可以自定义网格布局。

回到顶部