鸿蒙项目云捐助第二十七讲云捐助项目首页分类导航的联动效果

鸿蒙项目云捐助第二十七讲云捐助项目首页分类导航的联动效果

在前面的章节中已经完成云捐助项目首页中分类导航功能模块的实现，这里需要实现分类导航对应的功能，就是当点击首页分类导航的每一项时，必须链接到分类页面中，并且在分类页面中当前被选择的分类项也与首页点击的分类项有关联。这里实现首页分类导航的联动效果。

一、云捐助首页分类导航的联动效果

点击云捐助首页分类导航中的每一项需要进入到分类页面中，在分类页面中也需要进入同样的分类项，这里可以在分类组件中设定一个负责右边滚动的参数，这个参数由父类点击的导航项决定，需要父类进行单向传递，代码如下所示。

图中在MyNewSideBar分类组件代码引入@Prop注解接收首页的父类单向传递过来的右侧滚动索引值。这个索引值命名为sub_right_index变量名。在父组件调用MyNewSideBar子组件时传入右侧滚动的索引值。如下图所示。

由于分类导航是属性IndexComponent组件中的元素，因此对于分类页面的右侧滚动索引也需要传入到IndexComponent组件中，其目的不是去控制IndexComponent的分类导航，而是获取IndexComponent组件中用户点击了哪一项的分类导航。也就是即要把变量传入到IndexComponent中去接收，也需要IndexComponent的点击操作返回给主组件用户点击操作的是哪一个分类项。这个变量相当于双向传递的效果。在鸿蒙中双向传递时子组件中使用@Link注解接收，在子组件接收数据时父组件中使用$符号引用变量。如下图所示。

这里在首页中引用IndexComponent首页组件时传入一个参数right_control_index变量，其值对应了主组件中的myright_index,由于是双向绑定，这里使用$符号进行传输。这样IndexComponent中分类导航的子项索引就会通知到主组件中。对于子组件IndexComponent首页组件，可以使用@Link来接收双向传递的变量。如下图所示。

子组件IndexComponent接收变量后，当分类导航中的每一项发生点击时，就会改变接收的分类变量的值，并会把这个值传递给父组件。代码如下图所示。

这里在分类导航中的每一项点击事件onClick发生后,改变从父组件中接收的变量right_control_indexd左侧导航分类索引的值。回到MyNewSideBar的分类导航组件中,改变初始化时,右侧捐赠列表导航滚动到的索引值,如下图所示。

代码中对MyNewSideBar组件中右侧的List使用intialIndex方法初始化索引,把在首页组件IndexCompoonent的分类点击值双向传递到首页,再单向传递到导航MyNewSideBar组件中,由于在右侧导航组件List列表中的循环子项数据使用ListGroupItem的按分类组索引的方法，如下图所示。

由于ListGroupItem的参与，就可以实现捐赠列表分类的滚动效果，这样在首页分类导航中点击的分类导航选项一定在分类页面中对应左侧导航的分类，右侧捐赠列表也可以滚动到相应的位置。如下图所示。

但是这里有一个问题，就是从首页的分类导航中点击到分类页面后，如果是第一次访问是可以滚动到相应的位置，如果不是第一次，就会一直保持在第一次访问时滚动到的位置，其点击首页分类导航条目索引的变化并不能体现在分类页面中。这里引入鸿蒙的观察者模式，使用@Watch来观测某个变量，当变量发生改变时可以控制右侧的List滚动控制器操作右侧的捐赠列表页。@Watch添加的位置中下图所示。

这里在sub_right_index的接收父组件变量中再加入@Watch的注解,@Watch的参数就是需要执行的方法,也就是使用户@Watch还需要定义一个执行方法changeright,注解@Watch监测到sub_right_index发生变化时就调用changeright方法,这时changeright方法的代码如下图所示。

代码中@Watch修饰的变量下面有一个private修饰的私有方法changeright()方法,在此方法中调用右侧List列表的控制器right_scroller的scrollToIndex方法,将右侧的捐赠列表数据滚动到指定的索引。

其展示效果如下图所示。

这样就实现的首页点击导航分类的某一项,在分类页面就会右侧就会滚动到对应分类上,左侧List分类列表也可以定位到这里。

后续还会有鸿蒙项目云捐助中捐助模块及其他云功能的精彩,欢迎关注。