手机APP的引导页是一个常见的功能，今天和大家一起分享在鸿蒙系统的撸引导页代码的经验。
应用引导页的功能
①为什么要做应用的引导功能？
几乎所有的App都会有做一些界面引导，有的是页面交互的引导，有的是为了介绍新功能。
②通用的功能性引导大概分哪些呢？
主功能引导、新功能引导和功能转移或改名引导。
③通用的应用引导，需要注意哪些？
引导的内容文字不宜太长，适当加入一些图案可以方便用户理解。言归正传吧，开始咱们今天的主题，如何实现应用的引导功能吧！
实现应用的引导功能
具体步骤如下：
首先来看看讨论的引导功能的效果吧！点击引导页，向上滑动过程，第一个界面图案和文字渐变消失的过程。
而第二页界面的图片和文字渐渐清晰可见。底部Next图标会下滑隐藏再弹出的动画效果。
开发准备
搭建鸿蒙开发环境，这里就不做介绍了，如果没有环境没有搭建好的同学可以进入学习安装环境，安装好环境以后接下来我们就可以进行开发工作了。
①设计思路
首先我们做的是公用的组件，我们需要使用组件化思想去搭建我们的项目框架，接下来根据组件的需求我们先去设计一下界面。
设计好之后我们需要对页面添加数据，添加完数据之后组件的大体界面已经展示给我们，下来就是在滑动page的时候添加底部button的回弹动画，并且在此时我们需要操作page的子view。最后我们要去使用我们的组件。
②设计步骤
（1）设计界面
根据我们要实现的功能，我们可以使用PageSlider控件去实现界面布局文件，实现代码为：PageSliderohos:id="+id:vertical_view_pager"ohos:width="match_parent"ohos:height="match_parent"/PageSlider
添加数据、初始化数据：
publicvoidsetData(){super.setData();pageColors=newArrayList();pageColors.add(getString(ResourceTable.Color_colorAccent));pageColors.add(getString(ResourceTable.Color_color2));pageColors.add(getString(ResourceTable.Color_colorPrimary));pageColors.add(getString(ResourceTable.Color_color3));pageMoudles=getData();}privateListPageMoudlegetData(){StringtextValue="LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.";PageMoudlepageMoudleOne=newPageMoudle();pageMoudleOne.setRecoureId(ResourceTable.Graphic_intro_second_vector);pageMoudleOne.setBackGroudRgbColor(RgbColor.fromArgbInt(Color.getIntColor(pageColors.get(0))));pageMoudleOne.setTitle("LoremIpsumLoremIpsum");pageMoudleOne.setText(textValue+textValue+textValue);pageMoudleOne.setTitleSize(17);pageMoudleOne.setTextSize(14);ListPageMoudledatas=newArrayList();datas.add(pageMoudleOne);PageMoudlepageMoudleTwo=newPageMoudle();pageMoudleTwo.setRecoureId(ResourceTable.Graphic_four);pageMoudleTwo.setBackGroudRgbColor(RgbColor.fromArgbInt(Color.getIntColor(pageColors.get(1))));pageMoudleTwo.setTitle("LoremIpsumLoremIpsum");pageMoudleTwo.setText(textValue+textValue);datas.add(pageMoudleTwo);PageMoudlepageMoudleThree=newPageMoudle();pageMoudleThree.setRecoureId(ResourceTable.Graphic_ohos);pageMoudleThree.setBackGroudRgbColor(RgbColor.fromArgbInt(Color.getIntColor(pageColors.get(2))));pageMoudleThree.setTitle("LoremIpsum");pageMoudleThree.setText(textValue);datas.add(pageMoudleThree);PageMoudlepageMoudleFour=newPageMoudle();pageMoudleFour.setRecoureId(ResourceTable.Media_new_intro);pageMoudleFour.setBackGroudRgbColor(RgbColor.fromArgbInt(Color.getIntColor(pageColors.get(3))));pageMoudleFour.setTitle("LoremIpsum");pageMoudleFour.setText(textValue+textValue+textValue);datas.add(pageMoudleFour);returndatas;}
设置provider：
pageSlider=(PageSlider)findComponentById(ResourceTable.Id_vertical_view_pager);pageSlider.setOrientation(Component.VERTICAL);pageSlider.addPageChangedListener(this);pageSlider.setTouchEventListener(this::onTouchEvent);adapter=newVerticalIntroPagerAdapter(this,pageMoudles);pageSlider.setProvider(adapter);（2）添加动画这里我们使用属性动画去完成底部button的上弹和下弹操作，上弹和下弹是和我们手指滑动的方向是有关系的。所以这里我们必须实现手指的触摸事件，在触摸事件中获取我们手机滑动的距离，如果距离大于0则是下滑，如果小于0则是下滑。
获取是上滑还是下滑代码如下：
OverridepublicbooleanonTouchEvent(Component