首页 > 其他分享 >鸿蒙开发-Swiper(轮播图容器组件)

鸿蒙开发-Swiper(轮播图容器组件)

时间:2024-09-21 20:49:06浏览次数:8  
标签:index 轮播 鸿蒙 Color proxy backgroundColor true Swiper

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。

针对复杂页面场景,可以使用 Swiper 组件的预加载机制,利用主线程的空闲时间来提前构建和布局绘制组件,优化滑动体验。

布局与约束

Swiper作为一个容器组件,如果设置了自身尺寸属性,则在轮播显示过程中均以该尺寸生效。如果自身尺寸属性未被设置,则分两种情况:如果设置了prevMargin或者nextMargin属性,则Swiper自身尺寸会跟随其父组件;如果未设置prevMargin或者nextMargin属性,则会自动根据子组件的大小设置自身的尺寸。

循环播放

通过loop属性控制是否循环播放,该属性默认值为true。

当loop为true时,在显示第一页或最后一页时,可以继续往前切换到前一页或者往后切换到后一页。如果loop为false,则在第一页或最后一页时,无法继续向前或者向后切换页面。

  • loop为true
Swiper() {
  Text('0')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text('1')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text('2')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.loop(true)

  • loop为false
Swiper() {
  // ...
}
.loop(false)

自动轮播

Swiper通过设置autoPlay属性,控制是否自动轮播子组件。该属性默认值为false。

autoPlay为true时,会自动切换播放子组件,子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000,单位毫秒。

Swiper() {
  // ...
}
.loop(true)
.autoPlay(true)
.interval(1000)

导航点样式

Swiper提供了默认的导航点样式和导航点箭头样式,导航点默认显示在Swiper下方居中位置,开发者也可以通过indicator属性自定义导航点的位置和样式,导航点箭头默认不显示。

通过indicator属性,开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置,同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

  • 导航点使用默认样式
Swiper() {
  Text('0')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text('1')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text('2')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}

  • 自定义导航点样式

导航点直径设为30vp,左边距为0,导航点颜色设为红色。

Swiper() {
  // ...
}
.indicator(
  Indicator.dot()
    .left(0)
    .itemWidth(15)
    .itemHeight(15)
    .selectedItemWidth(30)
    .selectedItemHeight(15)
    .color(Color.Red)
    .selectedColor(Color.Blue)
)

Swiper通过设置displayArrow属性,可以控制导航点箭头的大小、位置、颜色,底板的大小及颜色,以及鼠标悬停时是否显示箭头。

  • 箭头使用默认样式
Swiper() {
  // ...
}
.displayArrow(true, false)

  • 自定义箭头样式

箭头显示在组件两侧,大小为18vp,导航点箭头颜色设为蓝色。

Swiper() {
  // ...
}
.displayArrow({ 
  showBackground: true,
  isSidebarMiddle: true,
  backgroundSize: 24,
  backgroundColor: Color.White,
  arrowSize: 18,
  arrowColor: Color.Blue
  }, false)

页面切换方式

Swiper支持手指滑动、点击导航点和通过控制器三种方式切换页面,以下示例展示通过控制器切换页面的方法。

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

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        Text('0')
          .width(250)
          .height(250)
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('1')
          .width(250)
          .height(250)
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('2')
          .width(250)
          .height(250)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .indicator(true)

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext(); // 通过controller切换到后一页
          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious(); // 通过controller切换到前一页
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

轮播方向

Swiper支持水平和垂直方向上进行轮播,主要通过vertical属性控制。

当vertical为true时,表示在垂直方向上进行轮播;为false时,表示在水平方向上进行轮播。vertical默认值为false。

  • 设置水平方向上轮播。
Swiper() {
  // ...
}
.indicator(true)
.vertical(false)

设置垂直方向轮播。

Swiper() {
  // ...
}
.indicator(true)
.vertical(true)

每页显示多个子页面

Swiper支持在一个页面内同时显示多个子组件,通过displayCount属性设置。

Swiper() {
  Text('0')
    .width(250)
    .height(250)
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)
  Text('1')
    .width(250)
    .height(250)
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)
  Text('2')
    .width(250)
    .height(250)
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
  Text('3')
    .width(250)
    .height(250)
    .backgroundColor(Color.Blue)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.indicator(true)
.displayCount(2)

自定义切换动画

Swiper支持通过customContentTransition设置自定义切换动画,可以在回调中对视窗内所有页面逐帧设置透明度、缩放比例、位移、渲染层级等属性实现自定义切换动画。

@Entry
@Component
struct SwiperCustomAnimationExample {
  private DISPLAY_COUNT: number = 2
  private MIN_SCALE: number = 0.75

  @State backgroundColors: Color[] = [Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange]
  @State opacityList: number[] = []
  @State scaleList: number[] = []
  @State translateList: number[] = []
  @State zIndexList: number[] = []

  aboutToAppear(): void {
    for (let i = 0; i < this.backgroundColors.length; i++) {
      this.opacityList.push(1.0)
      this.scaleList.push(1.0)
      this.translateList.push(0.0)
      this.zIndexList.push(0)
    }
  }

  build() {
    Column() {
      Swiper() {
        ForEach(this.backgroundColors, (backgroundColor: Color, index: number) => {
          Text(index.toString()).width('100%').height('100%').fontSize(50).textAlign(TextAlign.Center)
            .backgroundColor(backgroundColor)
            .opacity(this.opacityList[index])
            .scale({ x: this.scaleList[index], y: this.scaleList[index] })
            .translate({ x: this.translateList[index] })
            .zIndex(this.zIndexList[index])
        })
      }
      .height(300)
      .indicator(false)
      .displayCount(this.DISPLAY_COUNT, true)
      .customContentTransition({
        timeout: 1000,
        transition: (proxy: SwiperContentTransitionProxy) => {
          if (proxy.position <= proxy.index % this.DISPLAY_COUNT || proxy.position >= this.DISPLAY_COUNT + proxy.index % this.DISPLAY_COUNT) {
            // 同组页面完全滑出视窗外时,重置属性值
            this.opacityList[proxy.index] = 1.0
            this.scaleList[proxy.index] = 1.0
            this.translateList[proxy.index] = 0.0
            this.zIndexList[proxy.index] = 0
          } else {
            // 同组页面未滑出视窗外时,对同组中左右两个页面,逐帧根据position修改属性值
            if (proxy.index % this.DISPLAY_COUNT === 0) {
              this.opacityList[proxy.index] = 1 - proxy.position / this.DISPLAY_COUNT
              this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - proxy.position / this.DISPLAY_COUNT)
              this.translateList[proxy.index] = - proxy.position * proxy.mainAxisLength + (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0
            } else {
              this.opacityList[proxy.index] = 1 - (proxy.position - 1) / this.DISPLAY_COUNT
              this.scaleList[proxy.index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - (proxy.position - 1) / this.DISPLAY_COUNT)
              this.translateList[proxy.index] = - (proxy.position - 1) * proxy.mainAxisLength - (1 - this.scaleList[proxy.index]) * proxy.mainAxisLength / 2.0
            }
            this.zIndexList[proxy.index] = -1
          }
        }
      })
    }.width('100%')
  }
}

标签:index,轮播,鸿蒙,Color,proxy,backgroundColor,true,Swiper
From: https://blog.csdn.net/weixin_65051584/article/details/142424013

相关文章

  • 鸿蒙开发项目中你是怎么理解生命周期?你知道的生命周期函数有那些, 说一下执行时机?(页面
    生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。#一、怎么理解生命周期?生命周期:简单点理解就是从创建到销毁的过程#二、你知道的生命周期函数有那些,说一下执行时机?自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组......
  • 感谢老美苦苦相逼,逼出华为鸿蒙PC
    文|琥珀食酒社作者|随风哎,告诉大家一个不好的消息刚刚余总说WindowsPC是最后一批了因为美国新一轮制裁又来了但大家别急再告诉大家一个好消息那就是我们的鸿蒙PC要来了今天不是华为三折叠手机和iPhone16首发吗估计老美是前端时间受刺激了华为选择硬刚苹果同天开发布会结果拿出......
  • PyQt5 使用 QStackedWidget 实现轮播展示动画,但是却疯狂闪烁的解决办法
    PyQt5使用QStackedWidget实现轮播展示动画,但是却疯狂闪烁的解决办法上篇说到,上篇见这里我们可能会遇到,当把鼠标移动到"下一页"和"上一页"按钮,又或者是Qlabel标签页时,就会疯狂闪烁,于是在这里换另一种方案,解决这个问题代码结构本文基于上篇,上篇见这里修改而来,全部代码......
  • Android静态轮播图
    在Android中实现静态轮播图,通常指的是在一个固定的布局中显示一系列图片,并且这些图片会按照一定的时间间隔自动切换。这种效果可以通过多种方式实现,比如使用ViewPager结合PagerAdapter,或者使用ViewFlipper等组件。下面我将给出一个基于ViewPager的简单示例。使用ViewPager实现轮播......
  • 【w0网页制作】Html+Css网页制作影视主题之庆余年Ⅱ含轮播表单(5页面附源码)
    庆余年2HTML+CSS网页开发目录......
  • 鸿蒙原生应用元服务开发-仓颉基础数据类型字符类型
    字符类型使用Rune表示,可以表示Unicode字符集中的所有字符。字符类型字面量字符类型字面量有三种形式:单个字符、转义字符和通用字符。一个Rune字面量由字符r开头,后跟一个由一对单引号或双引号包含的字符。单个字符的字符字面量举例:leta:Rune=r'a'letb:Rune=r"b"转......
  • 鸿蒙(HarmonyOS)--函数、类的声明和使用
    目录1.函数1.1函数的声明1.2可选参数 1.2.1 参数名?:类型  1.2.2参数名:类型=值 1.3Rest参数 1.4返回类型1.4.1显示返回1.4.2隐示返回1.4.3无返回类型1.5函数的作用域1.5.1全局作用域1.5.2局部作用域1.6函数调用1.7函数类型 1.8 箭头函数/l......
  • 鸿蒙(HarmonyOS)--编程语言-ArkTS 语言基础
    目录 ArkTS基础知识1声明1.1变量声明1.2常量声明1.3自动类型推断 2类型2.1基本类型 2.1.1 string2.1.2  number2.1.3boolean2.2引用类型2.2.1Object类型 2.2.2 Array类型2.2.3Void类型 2.3枚举类型 Enum2.4联合类型 Union 2.5 类型别......
  • 《鸿蒙/Harmony | 开发日志》图片压缩
    一般在做APP头像、背景等功能的时候,调用系统选择图片功能,上传给服务端,图片都非常的大,相机像素越高图片就越大。一般都有几M,甚至10M以上的,这个时候一般需要压缩图片,变成非常小的图片,如果不压缩图片,将几M的图片作为头像,用户访问个头像发现下载要个1-2秒,就体验非常差。压缩......
  • PyQt5 使用 QStackedWidget 实现轮播展示动画(自动与手动)
    PyQt5使用QStackedWidget实现轮播展示动画(自动与手动)在PyQt5中,如果需要用QStackedWidget展示图片比较生硬,参考网络上的一些内容,发现用QPropertyAnimation属性动画可实现想要的效果,于是记录在这里代码结构本文中全部代码全在test_QStackedWidget_Animation.py这一个文件中......