微信小程序目录切换实现分析

组件名称：目录

组件属性：目录数据，类型：字符串

组件描述：这是一个子组件，数据从父组件传输

渲染：

有多个目录，并且使用滚动视图容器。但是在当前组件中，只写入每个目录数据显示，实现目录切换效果，这将保证当前组件的最小粒度。

可用于分析当前组件的属性有：组件名称、开关状态、未选择状态和开关点击方法。

block wx : for=' { { catalog data } } ' wx : key=' id ' wx : for-item=' item ' class=' item ' view class=' scroll-view-item catalog-title { { curIndex==index ' 'catalog-active ' : ' catalog-normal ' } ' data-index=' { { index } } ' catch tap=' goindex ' { item。catalog}}/view/blockcurindex是单击当前目录时获得的索引。

Index是catalogData数组的默认索引，它是数据索引的值

GoIndex是单击当前目录的方法，curIndex的值是通过单击获得的

通过判断当前curIndex是否等于数组中的索引，如果是，则将选中的样式目录-active添加到当前目录，否则添加目录-normal。

更新默认库索引的默认值

组件({ /** *组件属性列表*/properties : { catalogdata 3360 { type : array，}}，/** *组件初始数据*/data: {curindex33600}，/* * *组件方法列表*/methods : { go index(event){ let next index=event . currenttarget . dataset . index；this . setdata({ curindex : next index })console . log(this . data . curindex '=' next index)；}，}})以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。