利用AlphabetIndexer索引组件实现导航联动效果

96 阅读2分钟

一.介绍:它本身不是容器组件,属于功能类组件。

二.作用:AlphabetIndexer 组件可以与容器组件结合,实现导航联动,以及快速定位的效果。

三.案例:在实际开发中以list列表容器和索引组件实现导航联动为主

四.步骤:

第一步:加载和渲染List列表数据(具体为ListItemGroup分组和ListItem列表项),一般情况下我们会通过sticky(StickyStyle.Header)属性添加粘性标题和通过scrollBar(BarState.Off)属性隐藏滚动条。
第二步:加载和渲染AlphabetIndexer索引组件,索引组件有两个必填参数分别是arrayValue(索引字符串数组)和selected(初始选中索引值/选中项索引值)且支持双向绑定。在实际开发中一般会通过设置usingPopup(true) 属性设置选中索引的控制弹框显示和隐藏。
第三步:为了实现列表和索引组件的双向联动,通常设置中间状态变量,用来存储当前选中下标,默认初始值为0。
第四步:从List列表到索引组件联动(正向联动)

1.通过List组件中的onScrollIndex事件获取当前滚动列表分组的的下标。 2.把当前获取到的分组下标index赋值给中间状态变量,并同步给索引组件中selected参数。 从而实现一个列表到索引的正向联动。在onScrollIndex事件中会将我们的ListItemGroup分组整体视为占据一个索引值,不去计算ListItemGroup内部ListItem具体列表项的索引值。

第五步:相反,从索引组件到List列表联动

1.通过索引组件中的onSelect事件获取点击的索引字母的下标, 2.在实践中调用scroller控制器对象中的scrollToIndex方法获取滚动到那个分组的下标,并同步给分组,将选中的分组展示到列表最上面。 3.因此我们还需要去创建控制器对象 scroller: Scroller = new Scroller(),并绑定给List容器组件。实现索引到列表反向联动。添加smooth参数设置(true/布尔)实现动态效果

五.存在性能问题:通过函数防抖进行优化,防止频繁触发使得页面出现卡顿

六.注意问题:需要给ListItemGroup分组添加header参数,需要自定义构建函数进行参数传递去实现

七.应用场景:电话簿中的联系人列表,微信/支付宝/百度网盘/QQ中的通讯录、好友列表,12306中的车站选择列表

scroller:可滚动容器组件的控制器