HarmonyOS 鸿蒙Next Swiper组件的用法

HarmonyOS 鸿蒙Next Swiper组件的用法 初学鸿蒙，求助关于swiper组件的用法

想实现一个根据传递进来的对象类型展示不同的组件，发现如果用自定义组件就渲染不出来，如果单纯的text、image这些就可以

代码如下

Swiper(this.controller) {
  LazyForEach(this.dataSource, (weather: HeadModelData, index: number) => {
    if (weather.type == 0) {
      // WeatherView2() ----这边不能正常渲染
      Text('00000')
        .backgroundColor("#fff")
        .height('100%')
        .width('100%')
    } else if (weather.type == 1) {
      Image($r('app.media.one'))
        .backgroundColor("#fff")
        .height('100%')
        .width('100%')
    } else {
      Text('222222')
        .backgroundColor("#fff")
        .height('100%')
        .width('100%')
    }
  })
}
.loop(true)
.cachedCount(2)
.autoPlay(true)
.interval(15 * 1000)
.duration(1500)
.indicator(false)

数据源封装如下

var headModelDatas = [];
headModelDatas.push(new HeadModelData(0))
headModelDatas.push(new HeadModelData(1))
headModelDatas.push(new HeadModelData(2))
headModelDatas.push(new HeadModelData(2))
this.dataSource = new WeatherDataSource(headModelDatas);

WeatherView2的代码如下

build() {
  Column(){
    Text('00000')
      .backgroundColor("#fff")
      .height('100%')
      .width('100%')
  }
}

如果不用WeatherView2，直接用Text可以正常轮播，如果用了WeatherView2就不行，WeatherView2里面也只有一个Text，不知如何解决，求助


更多关于HarmonyOS 鸿蒙Next Swiper组件的用法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

看不到你代码的全貌，但是你的代码估计是有问题的

@Component struct EchoText { private textStr: string = ‘’ build() { Text(this.textStr) .width(‘100%’) .height(160) .textAlign(TextAlign.Center) .fontSize(30) } }

@Component struct EchoText2 { private textStr: string = ‘’ build() { Column(){ Text(this.textStr) .width(‘100%’) .height(160) .textAlign(TextAlign.Center) .fontSize(30) } } }

@Entry @Component struct Page2 { private swiperController: SwiperController = new SwiperController() private swiperController2: SwiperController = new SwiperController()

build() { Column(){

  `Swiper`(`this.swiperController`){

    `Text`('1')
      .`width`('100%')
      .`height`(160)
      .`backgroundColor`(`Color`.Blue)
      .`textAlign`(`TextAlign`.Center)
      .`fontSize`(30)

    `Text`('2')
      .`width`('100%')
      .`height`(160)
      .`backgroundColor`(`Color`.Yellow)
      .`textAlign`(`TextAlign`.Center)
      .`fontSize`(30)

    `Text`('3')
      .`width`('100%')
      .`height`(160)
      .`backgroundColor`(`Color`.Red)
      .`textAlign`(`TextAlign`.Center)
      .`fontSize`(30)

    `Text`('4')
      .`width`('100%')
      .`height`(160)
      .`backgroundColor`(`Color`.Pink)
      .`textAlign`(`TextAlign`.Center)
      .`fontSize`(30)
  }
  .`cachedCount`(2)
  .`index`(1)
  .`autoPlay`(true)
  .`interval`(4000)
  .`indicator`(true)
  .`loop`(true)
  .`duration`(1000)
  .`itemSpace`(0)
  .`curve`(`Curve`.Linear)
  .`onChange`(index: number) => {
    `console`.info(index.toString())
  }


  `Swiper`(`this.swiperController2`){

    `EchoText`({
      `textStr`: '1'
    })
    `EchoText2`({
      `textStr`: '2'
    })
    `EchoText`({
      `textStr`: '3'
    })
    `EchoText`({
      `textStr`: '4'
    })
  }
  .`cachedCount`(2)
  .`index`(1)
  .`autoPlay`(true)
  .`interval`(4000)
  .`indicator`(true)
  .`loop`(true)
  .`duration`(1000)
  .`itemSpace`(0)
  .`curve`(`Curve`.Linear)
  .`onChange`(index: number) => {
    `console`.info(index.toString())
  }
  .`margin`({
    `top`: 20
  })

}

} }

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


Swiper组件用于实现轮播图效果，支持水平或垂直方向的滑动切换。Swiper组件通常用于展示图片、广告等内容，用户可以滑动切换不同的子组件。

Swiper组件的基本属性包括：

  1. index：设置当前显示的页面索引。
  2. autoPlay：设置是否自动播放。
  3. interval：设置自动播放的时间间隔。
  4. indicator：设置是否显示页面指示器。
  5. loop：设置是否循环播放。

示例代码：

import { Swiper, SwiperItem } from '@ohos/swiper';

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController();

  build() {
    Column() {
      Swiper(this.swiperController) {
        SwiperItem() {
          Text('Page 1')
            .fontSize(30)
            .textAlign(TextAlign.Center)
        }
        SwiperItem() {
          Text('Page 2')
            .fontSize(30)
            .textAlign(TextAlign.Center)
        }
        SwiperItem() {
          Text('Page 3')
            .fontSize(30)
            .textAlign(TextAlign.Center)
        }
      }
      .autoPlay(true)
      .interval(3000)
      .indicator(true)
      .loop(true)
    }
  }
}

在上述代码中，Swiper组件包含三个SwiperItem子组件，每个SwiperItem代表一个页面。通过设置autoPlay为true，Swiper组件会自动播放；interval设置为3000表示每3秒切换一次；indicator为true表示显示页面指示器；loop为true表示循环播放。

Swiper组件还支持通过SwiperController进行手动控制，例如跳转到指定页面或停止自动播放。

总结：Swiper组件是HarmonyOS中用于实现轮播图效果的常用组件，支持自动播放、循环播放、显示指示器等功能，适用于需要展示多个内容的场景。

回到顶部