swiper组件中套了Image组件 HarmonyOS 鸿蒙Next

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

swiper组件中套了Image组件 HarmonyOS 鸿蒙Next

在swiper组件中套了Image组件绑定onComplete事件,拿图片实际绘制的宽度(contentWith),图片实际绘制的高度(contentHeight)当作图片的宽度和高度,但是Image组件直接不显示图片

深色代码主题
复制
@Entry
@Component
struct ImagePage {
@State contentWidth: number = 0
@State contentHeight:number=0
build() {
Column() {
Swiper(){
Image(‘https://img2.baidu.com/it/u=1544882228,2394903552&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726938000&t=bd04460c6c6b15f34f4f71215dfa2a6f’)
.onComplete((event)=>{
// 这里如果用event.componentWidth不显示图片
this.contentWidth=event!.componentWidth
console.log(‘第12行 , this.contentWidth’, this.contentWidth)
// 这里用event.componentHeight不显示图片
this.contentHeight=event!.componentWidth
console.log(‘第14行 , this.contentHeight’, this.contentHeight)
console.log(“complete”,JSON.stringify(event,null,2))
})
.width(this.contentWidth+‘px’)
.height(this.contentHeight+‘px’)
}
}
.height(‘100%’)
.width(‘100%’)
}
}


更多关于swiper组件中套了Image组件 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

图片不显示是因为swiper组件宽高设置位置错误导致swiper宽高未设置，修改下即可：

@Entry
@Component
struct ImagePage {
  @State contentWidth: number = 0
  @State contentHeight:number=0
  build() {
    Column() {
      Swiper(){
        Image('https://img2.baidu.com/it/u=1544882228,2394903552&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1726938000&t=bd04460c6c6b15f34f4f71215dfa2a6f')
          .onComplete((event)=>{
            // 这里如果用event.componentWidth不显示图片
            this.contentWidth=event!.componentWidth
            console.log('第12行 , this.contentWidth', this.contentWidth)
            // 这里用event.componentHeight不显示图片
            this.contentHeight=event!.componentHeight
            console.log('第14行 , this.contentHeight', this.contentHeight)
            console.log("complete",JSON.stringify(event,null,2))
          })
          .width(this.contentWidth+'px')
          .height(this.contentHeight+'px')
      }
      .height('100%')
      .width('100%')
    }
  }
}

更多关于swiper组件中套了Image组件 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙（HarmonyOS）Next系统中，swiper组件中嵌套Image组件是一种常见的UI布局需求。这种结构允许用户在swiper滑动过程中查看不同的图片。

要实现这一功能，首先需要在XML布局文件中定义swiper组件，并在swiper的item模板中嵌套Image组件。每个swiper的item可以看作是一个独立的视图容器，用于承载单个Image或其他UI元素。

示例代码如下：

<swiper>
    <swiper-item>
        <image src="image1_path" />
    </swiper-item>
    <swiper-item>
        <image src="image2_path" />
    </swiper-item>
    <!-- 继续添加更多swiper-item -->
</swiper>

在JavaScript代码中，可以通过swiper组件的相关API来控制滑动行为，比如设置自动滑动、监听滑动事件等。同时，可以动态更新swiper-item中的Image组件的src属性，以实现图片的动态加载。

需要注意的是，swiper组件和Image组件的属性设置需要遵循鸿蒙系统的组件规范。例如，Image组件的src属性需要指向有效的图片资源路径。

此外，确保在开发环境中正确配置了鸿蒙系统的SDK和相关依赖，以便顺利编译和运行项目。

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

回到顶部