ArkUI项目实战之基于eTS实现第三方分享弹出框（二） 原创 精华

@toc

前言

上一篇ArkUI项目实战之基于eTS实现第三方分享弹出框（一）我们已经完成了基本的布局，这一篇我们将基于上篇实现弹窗的滑动分页功能

关键代码

在model文件夹下新建Item.ets文件，定义Item类，由于每个Item都是一张图片还有下面的文字，所以包含imgSrc、text两个成员变量

export class Item {
  imgSrc: Resource
  text: string

  constructor(imgSrc, text) {
    this.imgSrc = imgSrc;
    this.text = text;
  }
}

新建ItemData.ets文件，导入Item数据结构，定义一个itemData数组用于存放模拟数据

import { Item } from '../model/Item'

export const itemData: Item[] = [
  new Item($r('app.media.weixin'), '发送给朋友'),
  new Item($r('app.media.pengyouquan'), '发送到朋友圈'),
  new Item($r('app.media.qq'), '发送给好友'),
  new Item($r('app.media.lanya'), '蓝牙'),
  new Item($r('app.media.zhifubao'), '支付宝'),
  new Item($r('app.media.weixin'), '发送给朋友'),
  new Item($r('app.media.lanya'), '蓝牙'),
  new Item($r('app.media.pengyouquan'), '发送到朋友圈'),
  new Item($r('app.media.qq'), '发送给好友'),
  new Item($r('app.media.weixin'), '发送给朋友'),
  new Item($r('app.media.zhifubao'), '支付宝'),
]

导入Item和itemData

import { Item } from '../model/Item'
import { itemData } from '../model/ItemData'

在MyDialog自定义弹窗中定义一个data二维数组以及aboutToAppear()方法，该方法将在执行其build函数之前执行，对itemData数组进行分页操作，每8个放一组。其中itemData.length / 8 | 0为取整操作，同时需要初始化data数组，往data数组push空数组，如果不进行此操作直接进行下一步的分页操作会出错，达不到我们想要的效果

@CustomDialog
struct MyDialog {
  dialogController: CustomDialogController;
  data: Item[][] = []

  aboutToAppear(): void {
    // 初始化data数组
    for (let i = 0;i <= (itemData.length / 8 | 0); i++) {
      this.data.push([])
    }

    // 将Item项循环放进data数组并做分页操作
    for (let i = 0; i <= (itemData.length / 8 | 0); i++) {
      if (i == (itemData.length / 8 | 0)) {
        for (let j = 0;j < itemData.length % 8; j++) {
          this.data[i].push(itemData[i * 8+j]);
        }
      } else {
        for (let j = 0;j < 8; j++) {
          this.data[i].push(itemData[i * 8+j]);
        }
      }
    }
  }

  ...

定义SwiperController类型的控制器，用来控制组件翻页

swiperController: SwiperController = new SwiperController()

使用Swiper组件以及ForEach进行循环渲染，渲染的数据为data数组，每次循环的数据为第一维数组item1。在Flex容器中再使用ForEach进行渲染，这次渲染的数据为第一维数组中的数据，最多共有8个数据

Swiper(this.swiperController) {
    ForEach(this.data, item1 => {
        Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
            ForEach(item1, item2 => {
                shareItem({ imgSrc: item2.imgSrc, text: item2.text })
            })
        }
        .padding({ bottom: 50 })
    })
}

参考资料

1、Swiper-容器组件-组件-组件参考（基于TS扩展的声明式开发范式）-手机、平板、智慧屏和智能穿戴开发-JS API参考-HarmonyOS应用开发 | HarmonyOS

2、循环渲染-渲染控制语法-声明式语法-基于TS扩展的声明式开发范式-UI开发-基于JS开发-开发-HarmonyOS应用开发 | HarmonyOS

项目地址

MyDialog · Haoc_小源同学/HarmonyOS技术训练营 - 码云 - 开源中国 (gitee.com)

结语

本期到这里就结束啦！感谢看到最后的小伙伴们，不知道有没有讲得不清楚的或者写得不好的地方，欢迎指出来哦！该项目适合刚开始学习ArkUI eTS的小伙伴练练手，包含的知识点有自定义组件、Swiper组件、ForEach循环渲染、自定义弹窗等等。项目地址的代码还包含跳转的功能，但是目前该功能还不完善，所以没在文章中写出来，有兴趣的小伙伴可以看看，也欢迎各位开发者对项目进行优化~