鸿蒙界面开发(十):轮播 (Swiper)图布局&宽高比例apsectRatio

轮播——Swiper组件

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

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

Swiper作为一个容器组件,

  1. 如果设置了自身尺寸属性,则在轮播显示过程中均以该尺寸生效。(建议操作)子组件会根据swiper的宽高进行缩放。
  2. 如果自身尺寸属性未被设置,则分两种情况:
    2.1 如果设置了prevMargin或者nextMargin属性,则Swiper自身尺寸会跟随其父组件;
    2.2如果未设置prevMargin或者nextMargin属性,则会自动根据子组件的大小设置自身的尺寸。

先包子组件,再设swiper尺寸。子组件会自动进行拉伸

循环播放——loop属性

通过loop属性控制是否循环播放,该属性默认值为true。
当loop为true时,在显示第一页或最后一页时,可以继续往前切换到前一页或者往后切换到后一页。
如果loop为false,则在第一页或最后一页时,无法继续向前或者向后切换页面。

自动轮播——autoPlay属性

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

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

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

导航点样式——indicator属性

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

//自定义导航点
Swiper() {// ..}
.indicator( //true|false
  Indicator.dot()
    .left(0)
    .itemWidth(15)//默认的宽高
    .itemHeight(15)
    .color(Color.Red)
    .selectedItemWidth(30)//被选中的宽高
    .selectedItemHeight(15)
    .selectedColor(Color.Blue)
)

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

//自定义导航箭头
Swiper() {// ...}
.displayArrow({ 
  showBackground: true,
  isSidebarMiddle: true,
  backgroundSize: 24,
  backgroundColor: Color.White,
  arrowSize: 18,
  arrowColor: Color.Blue
  }, false)

displayArrow(value: ArrowStyle | boolean, isHoverShow?: boolean)
value	类型ArrowStyle | boolean	必填项	支持设置箭头和底板样式,异常场景使用ArrowStyle对象中的默认值。设置为false不显示箭头和底板,true显示默认的箭头和底板样式。默认值:false

isHoverShow	类型boolean	非必填项	设置鼠标悬停时是否显示箭头。默认值:false
说明:
isHoverShow为false时,常驻显示箭头,支持点击翻页。
isHoverShow为true时,只有在鼠标悬停时才会显示箭头,并支持点击翻页。

页面切换方式

Swiper支持手指滑动点击导航点通过控制器三种方式切换页面。

轮播方向——vertical属性

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

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

每页显示多个子页面——displayCount属性

.displayCount(2)//显示2个子页面

自定义切换动画

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

 .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
          }
        }
      })

属性aspectRadio

设置宽高比例。设定宽或者高一方的值,另一方随比例改变。
宽或者高100%时,设置宽高比,可以随容器大小自适应变化。

你可能感兴趣的:(鸿蒙前端学习,鸿蒙,前端,harmonyos)