小白小白从不日别的博客

唯一的区别就是在vue3中没有this了，响应式数据需要用ref或者reactive去替代，在一个就是computed的使用方式不同。以下vue3版的代码是基于上面 vue2版的 div实现方式进行调整的。这里就直接给出代码了。

基于Stage模型下的UIAbility开发，实现UIAbility内页面间的跳转和数据传递。页面路由：提供通过不同的url访问不同的页面，包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。

主要介绍如何使用通知能力和基础组件，实现模拟下载文件，发送通知的案例。├──entry/src/main/ets // 代码区│ ├──common│ │ ├──constants│ │ │ └──CommonConstants.ets // 公共常量类│ │ └──utils│ │ ├──Logger.ets // 日志工具类│ │ ├──NotificationUtil.ets // 通知工具类│ │ └──ResourseUtil.ets // 资源文件工具类│ ├──entryability│ │

在这一章我们主要学习：瀑布流、长列表、懒加载等功能瀑布流是一个比较复杂的通用组件，因为我们要尽量做到 普适，所以就需要考虑到各种场景下的处理方案，尽量可以满足日常开发的场景，所以这就在原本就复杂的前提下，让这个功能变得更加复杂了。

基于自定义弹框、首选项和页面路由实现一个模拟应用首次启动的案例。实现四个页面，启动页、隐私协议页、广告页和应用首页。实现自定义隐私协议弹窗，点击协议可查看隐私协议具体内容。页面间的路由跳转。相关概念首选项：首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。自定义弹窗： 通过CustomDialogController类显示自定义弹窗。

【代码】vue3--自定义 dialog。

自定义常量封装// Thousandth：比例或者进度条// 数字常量// list space：列表项之间的间距// navigation title：导航标题export const ADD_TASK_TITLE: string = '添加任务';export const EDIT_TASK_TITLE: string = '编辑任务';// prompt message：提示信息。

pnpm 跟 npm 和 yarn 的差距就是把原来每个项目安装 modules 放到统一的文件夹中，通过符号链接(软连接)和硬链接，注意项目要和 pnpm 统一存依赖的 modules 同盘，不然就等于丢失了 pnpm 的优势。首先，执行 npx tailwindcss init -p 命令会给我们自动生成 tailwind.config.js 文件在项目根目录下。这里首先需要在 static 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。

我们将使用List组件Toggle组件以及Router接口，实现一个简单的设置页，点击将跳转到对应的详细设置页面。"color": [},},},},},},},},},},},},},},},},},},"value": "早起"},"value": "喝水"},"value": "吃苹果"},"value": "每日微笑"},"value": "每日刷牙"},"value": "早睡"},"value": "已开启"},

在日常开发中，我们可能会用到 echarts ，但是如果每次使用都像下面这样去引入的话会导致最终项目打包体积变大echarts在vue或者react中使用存在的问题每个图表需要从头到尾写一遍完整的option配置，十分冗余在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作窗口缩放时的适应问题在项目中如何按需引入echarts图表 减少打包体积的大小所以我们可以对echarts实现按需引入，也就是用到了哪些模块，哪些图表我们手动按需导入优化点就在于。

当我们的鼠标移动到，触发弹层的视图和展示弹出层视图中展示的内容之间的空白区域时，会发现此时气泡会消失，这个很容易理解，因为当移到这个间隙的时候就会触发mouseleave事件，那么此时isVisable就会变回false。等等，我们不难发现这些前台项目(官网)等，它们的风格是不同的，那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了，就需要我们自己去自定义一些通用的组件。这些对于一些后台管理系统来说是最好的选择，因为后台管理系统其实都是大同小异的，包括功能、布局结构等。

那么我们一般的做法就是使用 import xxx from "@/lib/Button/index.vue" ，但是如果要是每个都去这样引入使用，属实有些麻烦了，那么有没有一种方法可以简化呢？等等，我们不难发现这些前台项目(官网)等，它们的风格是不同的，那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了，就需要我们自己去自定义一些通用的组件。这里我们的通用组件都放在了src下的lib目录下，作为一个通用的物料库。一般对于这种通用型的组件，就说明在一个系统中会很频繁的用到。

这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。：初始化生成 tailwind.config.js 文件。来解析和处理 Tailwind 的 CSS 指令。最后需要在 main.js 里引入该文件。：安装 tailwindcss 插件。

"color": [},},},},..."value": "精选"},"value": "手机"},"value": "服饰"},"value": "穿搭"},"value": "家居"},"value": "【新品上市】畅乐冰晶绿低脂新品"},"value": "【新品上市】奶茶自然清新亲近自然"},"value": "重磅推荐，MD新品试用中！},"value": "6662人评价 95%好评"},},},},},

在实际开发中，我们可能会遇见在一个项目中会很平凡的使用一个或者多个通用组件，那么我们一般采取的做法就是写一个公共的index.js页面，然后将所有的通用组件引入进去，再利用app.component一个一个去注册，最后在main.js中注册插件。defineAsyncComponent：创建一个按需加载的异步组件。Glob：帮助我们在文件系统重导入多个模块。通过以上就可以实现通用组件的自动化注册了。这里我们就举一个简单的示例来演示一下。通过以上方式就可以帮助我们完成了。

2.停止滚动，是否触底了触底了才加载数据，反之不加载数据；，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。触底了--只有触底了才会进行数据加载，这里会出现加载两次的情况，因此在这里不适合进行数据的请求操作。│ │ │ └──CommonConstants.ets // 公共常量类。└──entry/src/main/resources // 资源文件目录。注册三个事件，开始滚动，滚动结束，滚动至列表尾部(触发两次，滚动至+回弹)

对于这里的处理一共分为两个部分，点击滑块后变色，动画效果。

在业务场景中，假设这里我们要实现点击 汉堡 后，会有一个自下而上的popup弹出层。因此这里我们需要先实现这样的一个公共的popup弹出层。到这里这个组件也就轻松的实现啦~

Refresh组件支持下拉刷新，包裹list组件，下拉事件中更新列表这里我们需要提前了解一下@Builder装饰器的基本用法ArkUI提供了一种轻量的UI元素复用机制@Builder，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。为了简化语言，我们将@Builder装饰的函数也称为“自定义构建函数”。文档中心在后面我们也会去详细的讲解 @Builder装饰器 的使用。

各个页面共享同一个播放状态，而且可以互相控制，如果传递来传递去会非常的麻烦，但是他们都是Tabs组件内的，我们在index页面。创建两个子组件，一个是播放控制的子组件，一个是背景播放的子组件。一个状态，在各个组件。