HarmonyOS 鸿蒙Next Swiper 嵌套图片 滑动过程中圆角失效

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Swiper 嵌套图片 滑动过程中圆角失效

Swiper 嵌套图片 滑动过程中圆角失效

@Builder
setBannerUi() {
  Row() {
    Swiper(this.swiperController) {
      ForEach(this.bannerData, (url: BannerItemModelResponse) => {
        Row(){
          Image(url.url)
            .width('100%')
            .height(168)
            .borderRadius(8)
        }
        .borderRadius(8)
        .clip(true)
      })
    }
    .loop(true) // 无限轮播
    .autoPlay(true) // 自动播放
    .interval(1000) // 间隔时间
    .index(this.indexCont)
    .onChange((index: number) => {
      this.indexCont = index
    })
  }
  .width('100%')
  .height(168)
  .backgroundColor(Color.White)
  .borderRadius(8)
}

更多关于HarmonyOS 鸿蒙Next Swiper 嵌套图片 滑动过程中圆角失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复 
const swiperImage: Resource[] = [
  $r('app.media.ic_banner01'),
  $r('app.media.ic_banner02'),
  $r('app.media.ic_banner03'),
  $r('app.media.ic_banner04')
]

@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      
      Swiper() {
        ForEach(swiperImage, (item: Resource) => {
          Image(item)
            .width('100%')
            .aspectRatio(2.25)
            .borderRadius(16)
            .backgroundColor(Color.White)
        }, (item: Resource) => JSON.stringify(item))
      }
      .loop(true)
      .interval(2000)
      .itemSpace(0)
      .width('100%')
      .indicator(new DotIndicator().selectedColor('#F74E42'))
      .displayCount(1)
      .autoPlay(true)
      .margin({ top: 12, bottom: 12 })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}

更多关于HarmonyOS 鸿蒙Next Swiper 嵌套图片 滑动过程中圆角失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，Next Swiper组件嵌套图片时，如果在滑动过程中圆角失效，这通常是由于滑动过程中图片的绘制或布局更新未正确处理圆角属性所导致。

可能的原因包括：

  1. 布局刷新问题：在滑动过程中，如果图片的容器（如Image组件的父容器）未能正确保持圆角样式，可能是因为布局刷新机制未将圆角属性应用到新位置上。

  2. 样式优先级冲突：检查是否有其他样式或属性覆盖了圆角设置，特别是在滑动动画或状态变化时。

  3. 图片资源问题：确保图片资源本身没有硬编码的方形边框，这可能会影响圆角效果的显示。

  4. 组件特性：Next Swiper组件可能有其特定的渲染逻辑，导致在滑动过程中圆角属性未能正确应用。

解决方法可以尝试：

  • 确保圆角样式（如border-radius）在图片容器上正确设置，并且优先级足够高。
  • 检查并调整Next Swiper组件的样式设置，看是否有影响圆角显示的属性。
  • 如果问题依旧存在，考虑是否为Next Swiper组件的已知问题或限制，查阅官方文档或社区讨论以获取更多信息。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部