2

#盲盒+码##深入浅出学习eTs#（十三）滑动块提示-开源基础软件社区-51CTO.COM

 1 year ago
source link: https://ost.51cto.com/posts/19446
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

#盲盒+码##深入浅出学习eTs#（十三）滑动块提示 原创 精华

【本文正在参加「盲盒」+码有奖征文活动】https://ost.51cto.com/posts/19288

本项目Gitee仓地址：深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)

一、需求分析

#盲盒+码##深入浅出学习eTs#（十三）滑动块提示-开源基础软件社区
在打开APP的时候有时候会跳出来以上这种指引我们操作的滑块，需要一直点击下一步下一步，我们本章来制作一个这种：
  • 进入APP弹出
  • 需要点击下一步更换

二、控件介绍

Swiper：[官方文档](OpenAtom OpenHarmony)

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

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

Swiper(controller?: SwiperController)

参数：

参数名 参数类型 必填 参数描述
controller SwiperController 否 给组件绑定一个控制器，用来控制组件翻页。

除支持通用属性外，还支持以下属性，不支持Menu控制。

名称 参数类型 描述
index number 设置当前在容器中显示的子组件的索引值。 默认值：0
autoPlay boolean 子组件是否自动播放，自动播放状态下，导航点不可操作。 默认值：false
interval number 使用自动播放时播放的时间间隔，单位为毫秒。 默认值：3000
indicator boolean 是否启用导航点指示器。 默认值：true
loop boolean 是否开启循环。 设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。 默认值：true
duration number 子组件切换的动画时长，单位为毫秒。 默认值：400
vertical boolean 是否为纵向滑动。 默认值：false
itemSpace number | string 设置子组件与子组件之间间隙。 默认值：0
displayMode SwiperDisplayMode 主轴方向上元素排列的模式，优先以displayCount设置的个数显示，displayCount未设置时本属性生效。 默认值：SwiperDisplayMode.Stretch
cachedCount8+ number 设置预加载子组件个数。 默认值：1
disableSwipe8+ boolean 禁用组件滑动切换功能。 默认值：false
curve8+ Curve | string 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考Curve枚举说明，也可以通过插值计算模块提供的接口创建自定义的Curves(插值曲线对象)。 默认值：Curve.Ease
indicatorStyle8+ { left?: Length, top?: Length, right?: Length, bottom?: Length, size?: Length, mask?: boolean, color?: ResourceColor, selectedColor?: ResourceColor } 设置导航点样式： - left: 设置导航点距离Swiper组件左边的距离。 - top: 设置导航点距离Swiper组件顶部的距离。 - right: 设置导航点距离Swiper组件右边的距离。 - bottom: 设置导航点距离Swiper组件底部的距离。 - size: 设置导航点的直径。 - mask: 设置是否显示导航点蒙层样式。 - color: 设置导航点的颜色。 - selectedColor: 设置选中的导航点的颜色。
displayCount8+ number|string 设置元素显示个数。 默认值：1
effectMode8+ EdgeEffect 滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。 默认值：EdgeEffect.Spring 
// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): any {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listener = listener
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list = []
    for (var i = 1; i <= 10; i++) {
      list.push(i.toString());
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20)
        }, item => item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(true) // 默认开启指示点
      .loop(false) // 默认开启循环播放
      .duration(1000)
      .vertical(false) // 默认横向切换
      .itemSpace(0)
      .curve(Curve.Linear) // 动画曲线
      .onChange((index: number) => {
        console.info(index.toString())
      })

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('next')
          .onClick(() => {
            this.swiperController.showNext()
          })
        Button('preview')
          .onClick(() => {
            this.swiperController.showPrevious()
          })
      }
    }.margin({ top: 5 })
  }
}

三、UI设计

（1）首先需要放置一个滑动组件，如下图：

#盲盒+码##深入浅出学习eTs#（十三）滑动块提示-开源基础软件社区
      Swiper(this.swiperController) {
        Image($r('app.media.1')).objectFit(ImageFit.Contain)
        Image($r('app.media.4')).objectFit(ImageFit.Contain)
        Image($r('app.media.2')).objectFit(ImageFit.Contain)
        Image($r('app.media.3')).objectFit(ImageFit.Contain)
        Image($r('app.media.5')).objectFit(ImageFit.Contain)
      }
      .index(0)
      .cachedCount(5)
      .index(1)
      .indicator(true) // 默认开启指示点
      .loop(true) // 默认开启循环播放
      .duration(200)
      .vertical(false) // 默认横向切换
      .itemSpace(0)
      .curve(Curve.Linear) // 动画曲线
      .onChange((index: number) => {
        console.info(index.toString())
      })
      .backgroundColor(Color.Gray)
      .width("100%")
      .height("40%")

（2）接下来放置按钮

按钮与滑动的控制器进行绑定

#盲盒+码##深入浅出学习eTs#（十三）滑动块提示-开源基础软件社区
内容选择为下一条，上一条 
Row()
{
  Button('下一条')
    .onClick(() => {
      this.swiperController.showNext()
    })
  Blank()
    .width("20%")
  Button('上一条')
    .onClick(() => {
      this.swiperController.showPrevious()
    })
}

(3)导入图片

这里的图片选取的是51CTO官网的一些轮播图片

#盲盒+码##深入浅出学习eTs#（十三）滑动块提示-开源基础软件社区
选择图片资源，进行导入 
      Swiper(this.swiperController) {
        Image($r('app.media.1')).objectFit(ImageFit.Contain)
        Image($r('app.media.4')).objectFit(ImageFit.Contain)
        Image($r('app.media.2')).objectFit(ImageFit.Contain)
        Image($r('app.media.3')).objectFit(ImageFit.Contain)
        Image($r('app.media.5')).objectFit(ImageFit.Contain)
      }
#盲盒+码##深入浅出学习eTs#（十三）滑动块提示-开源基础软件社区

四、成果展示

#盲盒+码##深入浅出学习eTs#（十三）滑动块提示-开源基础软件社区
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK