手机上轮播图是如何实现的？看完让你过目不忘😉

小林没烦恼
1,036 阅读4分钟

轮播图在手机应用中的使用是很频繁的，我们手机应用App的首页几乎都有轮播图。轮播图有很多优点：比如说增加了页面的美观程度，也将信息更好的展现给用户。如一些视频播放器主页，优酷首页

[优酷 - 为好内容全力以赴 - 海量正版高清视频在线观看 (youku.com)]

youku.png

接下来我们进入主题!

在HarmonyOS鸿蒙应用开发中用到的是Swiper容器组件。

一、应用场景

常见的App应用首页轮播显示热门新闻，热门剧等

二、swiper使用方法

1.基础用法

Swiper() {
  // 轮播内容 
  // (设置尺寸，撑开swiper)
}
.width('100%')// 设置尺寸（内容拉伸、优先级高）
.height(100)

用例

Swiper() {                   //这里随便干了几张图片
  Image($r('app.media.4'))   //（子组件1）
  Image($r('app.media.5'))   //（子组件2）
  Image($r('app.media.10'))  //（子组件3）
  Image($r('app.media.7'))   //（子组件4）
}
.borderRadius(10) //圆角
.width("100%")
.height(200)

效果展示

例1.png

此时，轮播图的基础模型也就出来了哦！

2.常用属性

做完基础模型可以发现，目前的轮播图可以手势滑动进行切换，但是没有像手机上那样自行滚动，循环滚动的等效果。所以接下来我们要给轮播图添加属性，实现相应的效果！我先罗列一下常用的属性

1.- loop:子组件是否开启循环轮播，数据类型为布尔类型（boolea），默认值为true。

2.- autoPlay:子组件是否自动轮播，数据类型也是布尔类型（boolea），默认值为false，当loop为false时，自动轮播到最后一个子组件时停止轮播。

3.- interval: 子组件自动轮播的时间间隔，单位为毫秒（1秒 = 1000毫秒）。

4.- vertical: 轮播方向（是否纵向轮播），数据类型为布尔类型，默认为false即默认横向轮播。

vertical.png

用例

Swiper() {                   
  Image($r('app.media.4'))   
  Image($r('app.media.5'))   
  Image($r('app.media.10'))  
  Image($r('app.media.7'))   
}
.autoPlay(true)//自动轮播
.interval(2000)//轮播时间间隔2秒
.loop(true) // 循环轮播
.vertical(false) //横向轮播
.borderRadius(10) 
.width("100%")
.height(200)

效果展示

例2.png

动态图在下不知道怎么上传，知道的老铁可否传授一下！🤝👊

3.总结：

以上就是轮播图的基础用法和常用属性了，有些属性的默认值如果就是你想要的效果，可省略不写，简洁一下代码。

三、导航点indicator使用方法

indicator.png 1.基础用法

Swiper(){
  子组件1
  子组件2
  ...
}
.indicator(false) // 关闭导航
.indicator(Indicator.dot()) // 圆点指示器（默认）
.indicator(Indicator.digit()) // 数字指示器

1.- indicator:是否开启导航点，布尔类型（boolean），默认值为true

2.- indicator(Indicator.digit()):数字导航点

digit.png

3.- indictor(Indicator.dot()): 圆点导航，默认样式

2.导航点样式

1.导航点位置:设置导航点的位置

sign=Uwrh2mOxnisnEqvRoJTcFk6e5KA%3D) left：x 距离Swiper组件左边的距离； right：x 距离Swiper组件右边的距离； top：x 距离Swiper组件上边的距离； bottom：x 距离Swiper组件底边的距离；

Swiper() {
  Image($r('app.media.4'))
  Image($r('app.media.5'))
  Image($r('app.media.10'))
  Image($r('app.media.7'))
}
.indicator(Indicator.dot()
  .left(10)  //距离左边10
  .top(180)  //距离顶部180
)
.width("100%")
.height(200)

position.png

通常只设置左右，上下的其中一个

2.导航点样式：设置导航点样式

导航点样式是给Indicator.dot()设置样式:

itemWidth表示没有选中的导航点宽度；itemHeight表示没有选中的导航点高度；color表示没有选中的导航点颜色。selectedItemWidth表示选中的导航点宽度；selectedItemHeight表示选中的导航点高度；selectedItemColor表示选中的导航点颜色

Swiper() {
  Image($r('app.media.4'))
  Image($r('app.media.5'))
  Image($r('app.media.10'))
  Image($r('app.media.7'))
}
.indicator(Indicator.dot()
  .itemWidth(20)
  .itemHeight(20)
  .color(Color.White)
  .selectedItemWidth(10)
  .selectedItemHeight(10)
  .selectedColor(Color.Pink)
)

效果展示

dot.png

四、控制器控制轮播图轮播

通过按钮上一页，下一页实现对轮播图的控制

1.创建控制器

controller: SwiperController = new SwiperController()

2.给Swiper设置控制

 Swiper(this.controller) {
     子组件1
     子组件2
     ...
 }

3.通过按钮调用函数方法

showPrevious():void 上一页

showNext():void 下一页

Button('上一页')
          .onClick(() => {
            this.controller.showPrevious()
          })
        Button('下一页')
          .onClick(() => {
            this.controller.showNext()
          })

4.实例展示

@Entry
@Component
struct practise2Page {
 controller: SwiperController = new SwiperController()
 build() {
   Column() {
     Swiper(this.controller) {
       Image($r('app.media.4'))
       Image($r('app.media.5'))
       Image($r('app.media.10'))
       Image($r('app.media.7'))
     }
     .indicator(Indicator.dot())
     .autoPlay(true)
     .interval(2000)
     .width("100%")
     .height(200)

     Row() {
       Button("上一页")
         .onClick(() => {
           this.controller.showPrevious()
         })
       Button("下一页")
         .onClick(() => {
           this.controller.showNext()
         })
     }
   }
   .padding(10)
   .width("100%")
   .height("100%")
 }
}

button.png

基本功能就可以实现了，点击上一页，轮播图就会向上一页跳转，点击下一页，轮播图就会向下一页跳转。

五、总结

通过以上的学习，对轮播图和swiper组件的认识学习可以说是比较深刻了。我们做一个像上面的优酷主页轮播图已经可以说是手拿把掐了，小伙伴们可以自己动手敲一下代码来感受一下吧

优酷主页轮播图代码

Swiper() {
  Stack() {
    Image($r("app.media.1020"))
      .width('100%')
    Text("末路狂花钱·贾冰铁公鸡爆改富豪")
      .fontSize(16)
      .fontColor(Color.White)
      .position({
        x: 10,
        y: 150
      })
  }

  Stack() {
    Image($r("app.media.1021"))
      .width('100%')
    Text("旋风战车队6·新队")
      .fontSize(16)
      .fontColor(Color.White)
      .position({
        x: 10,
        y: 150
      })
  }

  Stack() {
    Image($r("app.media.1022"))
      .width('100%')
    Text("极限挑战贾乃亮单人一组，心态崩了")
      .fontSize(16)
      .fontColor(Color.White)
      .position({
        x: 10,
        y: 150
      })
  }

  Stack() {
    Image($r("app.media.1029"))
      .width('100%')
    Text("无线超越班浪漫双人舞")
      .fontSize(16)
      .fontColor(Color.White)
      .position({
        x: 10,
        y: 150
      })
  }

  Stack() {
    Image($r("app.media.1018"))
      .width('100%')
    Text("这是我的岛，吴奇隆跳海")
      .fontSize(16)
      .fontColor(Color.White)
      .position({
        x: 10,
        y: 150
      })
  }
}
.indicator(
  Indicator.dot()
    .right(5)
    .selectedItemWidth(0)
    .selectedColor(Color.White)

效果图

youku.png

实际效果是动态轮播的😭😭

avatar
文章
阅读
粉丝