鸿蒙OS Stage模式开发 Swiper轮播图实现APP 欢迎/引导页面

第一 先了解Swiper组件的知识

Swiper
滑块视图容器，提供子组件滑动轮播显示的能力。

SwiperController
Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。

2.代码示例

import router from '@ohos.router';
import StyleConstants from '../constants/StyleConstants';
/**
 * 引导页
 */
@Entry
@Component
struct WelcomePage {
//控制器
  private swiperController: SwiperController = new SwiperController()
  /**
   * 控制启动按钮显示还是隐藏
   */
  @State flag: boolean = false;
  private titleStr: string[] = ['精心打造  海量有声书', '付费精品节目', '人人都可以成为主播', '用心去听  用心去生活']
  private desStr: string[] = [
    '在生活节奏愈发快速的今天，听书成为爱书之人享受阅读的另一种方式。',
    '为你带来精深的专业知识，使你拥有广博的知识面。付费精品免费试听，让你听见不一样的节目。',
    '在APP注册主播上传自制节目，我们为每一个有梦想、想表达、爱分享的人打开一扇展示才华的窗口。'
  ]
  private swco: Record<string, number | Color> = { 'size': 30, 'bottom': 200, 'color': Color.Red }

  build() {
    Column({ space: 5 }) {
      Stack({ alignContent: Alignment.Bottom }) {
        Swiper(this.swiperController) {
          //todo 引导页图片内容
          //todo 引导页一
          Stack({ alignContent: Alignment.Center }) {
            Image($r("app.media.guide_default_1")).width(StyleConstants.FULL_PARENT).height(StyleConstants.FULL_PARENT)
            Column() {
              Text(this.titleStr[0]).fontSize(20).fontColor(Color.White)
              Text(this.desStr[0]).fontSize(20).fontColor(Color.White).margin({ left: 20, right: 20, top: 15 })
            }
          }.width('100%').height("100%").alignContent(Alignment.Center)


          //todo 引导页 二
          Stack({ alignContent: Alignment.Center }) {
            Image($r("app.media.guide_default_2")).width(StyleConstants.FULL_PARENT).height(StyleConstants.FULL_PARENT)
            Column() {
              Text(this.titleStr[1]).fontSize(20).fontColor(Color.White)
              Text(this.desStr[1]).fontSize(20).fontColor(Color.White).margin({ left: 20, right: 20, top: 15 })
            }
          }.width('100%').height("100%").align(Alignment.Center)
          //todo 引导页三
          Stack({ alignContent: Alignment.Center }) {
            Image($r("app.media.guide_default_3")).width(StyleConstants.FULL_PARENT).height(StyleConstants.FULL_PARENT)
            Column() {
              Text(this.titleStr[2]).fontSize(20).fontColor(Color.White)
              Text(this.desStr[2]).fontSize(20).fontColor(Color.White).margin({ left: 20, right: 20, top: 15 })
            }
          }.width('100%').height("100%").align(Alignment.Center)
        }
        .index(0) //todo 当前索引为0 开始
        .autoPlay(true) //todo 停止自动播放
        .indicator(true) // todo 默认开启指示点
        .indicatorStyle(this.swco)//指示点的样式。包含颜色，大小等，可自定义
        .loop(true) // todo 停止自动播放  默认开启循环播放
        .vertical(false) //todo 横向切换 默认横向切换
        .onChange((index: number) => {
          /**
           * 根据Index 进行判断 当引导页播放到最后一个页面时候
           *  有的app需要在最后一页展示启动按钮
           * 让启动按钮显示 否则的话 不显示
           */
          if (index == 2) { //todo 最后一个 设置flag 为true
            this.flag = true
          } else { //todo 不是最后一个 设置flag为false
            this.flag = false
          }
        })
        // if(this.flag)//todo 当flag 为true 则显示启动按钮 为false的时候不显示
        //   Text('启动').width('300px').height('150px')
        //     .textAlign(TextAlign.Center).fontSize(20)
        //     .backgroundColor(Color.White)
        //     .margin({right:20,top:20})
        //     .onClick(function(){//todo 实现按钮点击事件 进入到主界面
        //       router.push({
        //         uri:"pages/index"
        //       })
        //     })

        Row({ space: 20 }) {
          Text('登录注册')
            .fontSize(20)
            .fontColor(Color.White)
            .width(140)
            .height(45)
            .backgroundColor('#00000000')
            .borderStyle(BorderStyle.Solid)
            .borderRadius(40)
            .borderColor(Color.White)
            .borderWidth(1)
            .textAlign(TextAlign.Center)
            .onClick(() => {
              //跳转登录
              router.pushUrl({
                url: 'pages/LoginPage'
              })
            })
          Text('立即体验')
            .fontSize(20)
            .fontColor(Color.White)
            .width(140)
            .height(45)
            .backgroundColor('#00000000')
            .borderStyle(BorderStyle.Solid)
            .borderRadius(40)
            .borderColor(Color.White)
            .borderWidth(1)
            .textAlign(TextAlign.Center)
            .onClick(() => {
              //跳转首页
              router.pushUrl({
                url: 'pages/MainPage'
              })
            })
        }
        .width(StyleConstants.FULL_PARENT)
        .height(50)
        .margin({ bottom: 20 })
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Bottom)

      }
    }
  }
}```

## 第三步， 效果展示

![请添加图片描述](https://img-blog.csdnimg.cn/direct/e4cb5f01ad3a4137aa1b129645167952.jpeg)
![请添加图片描述](https://img-blog.csdnimg.cn/direct/e1c6a926c6fc45a1865d7da6af7f0f30.jpeg)
![请添加图片描述](https://img-blog.csdnimg.cn/direct/239d862fc1624eff8e3ca77b1cb66e18.jpeg)