HarmonyOS鸿蒙Next中Swiper小技巧-图片贴边滚出/导航点在图片下方

HarmonyOS鸿蒙Next中Swiper小技巧-图片贴边滚出/导航点在图片下方

Swiper小技巧

swiper默认效果：

![]

swiper：添加内边距

![]

效果实现：也就是添加内边距padding，添加个底部的内边距就能就可以把导航点撑开到图像底部，图片宽度设置成100%，高度根据需求来，左右边距也根据需求来调就可以了。

2 回复

在HarmonyOS鸿蒙Next中，Swiper组件用于实现轮播图效果。要实现图片贴边滚出和导航点在图片下方的效果，可以通过以下方式实现：

  1. 图片贴边滚出：

    • 使用Swiper组件的edgeEffect属性设置为spring，可以使图片在滑动到边缘时具有弹性效果，从而实现贴边滚出的效果。
    • 通过调整Swiper的itemSpace属性，可以控制图片之间的间距，使其在滚动时贴边显示。

  2. 导航点在图片下方：

    • 在Swiper组件中，使用indicator属性来添加导航点，并通过indicatorStyle自定义导航点的样式。
    • 将indicator的position属性设置为bottom，使导航点显示在图片下方。
    • 进一步通过indicatorStyle中的marginBottom属性调整导航点与图片之间的距离，确保导航点位于图片下方。

示例代码片段：

Swiper({
  edgeEffect: EdgeEffect.Spring,
  itemSpace: 0,
  indicator: {
    position: 'bottom',
    style: {
      marginBottom: '10px'
    }
  }
})

更多关于HarmonyOS鸿蒙Next中Swiper小技巧-图片贴边滚出/导航点在图片下方的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用Swiper组件实现图片贴边滚出和导航点在图片下方的效果，可以通过以下步骤实现：

  1. 贴边滚出效果：设置Swiper的itemSpace属性为0，确保图片之间无间隙。同时，调整Swiper的宽度和高度，使其与图片尺寸匹配。

  2. 导航点在图片下方：通过自定义indicator，将导航点放置在图片下方。可以使用Stack组件将Swiper和indicator叠加，并通过position属性调整indicator的位置。

示例代码：

Swiper({
  itemSpace: 0,
  indicator: {
    // 自定义导航点样式和位置
  }
}
回到顶部