微信小程序：data-* 的使用 及 在onLoad函数中初始化data{ }中数据

问题描述

在写功能点 选择具体地址后携带数据 跳转回 信息页面 并展示 的逻辑时，一开始想不到怎么获取每一个项的具体索引，又怎么将tabList（选项卡）、tabNow、各个选项卡对应的列表数组这三者联系起来（有点抽象！如图）

简单来说就是要拿到具体的列表项数据！

小程序页面

js文件中的 data 声明
解释：
tabList 是选项卡
tabNow 用于设置当前选中的选项卡 id
后面那些数组是每个选项卡的列表项

皇天不负有心人，终于让我在这篇文章中找到了蛛丝马迹，接下来上代码说一下解决思路。

问题分析

1. 先看两个红绿方框，分别对应选项卡和列表展示区

2. 其中，选项卡的数据来自 data 中的 tabList数组（wx:for 遍历时，索引是index）

3. 自定义一个属性id，可在 e.currentTarget.dataset.id 中获取该属性

4. 点击选项卡时，将对应的 index 传给 id ，再由 id 传给 tabNow

   扫描二维码关注公众号，回复： 17409944 查看本文章

5. 由此完成了tabList数组与tabNow的关联
   
   接下来是tabNow与具体列表项的关联

6. 看右下的绿框，每一个 wx:if 对应的就是一整个具体列表的渲染

7. 使用 wx:for 遍历具体列表并渲染，也使用自定义属性data-index = { { index }} 来定位每一个列表项 【很重要】

   更重要的重点来啦！
   那么怎么联系 tabNow 和 每一个列表数组，进而联系到列表项呢？

问题解决

1. 先在data中声明一个空数组 tabLink ，用于联系 tabNow 和 每一个列表数组，进而联系到列表项
   
2. 再在onLoad函数中初始化这个 “中间人” tabLink , 将列表数组全存进去
   
3. 那么现在的tabLink数组是这样的：
   
4. 现在的 tabNow的值 = 列表数组 在 tabLink数组 中的索引值 ，因为前面将tabNow 对应每一列表数组渲染都设置了固定值：
   tabNow = 0 则渲染 schoolBuilding数组 ；
   tabNow = 1 则渲染 canteen数组；
   …
   tabNow = 5 则渲染 other数组 ；
   而这些列表数组又被按顺序存进了tabLink数组中，自身有了index，分别为0,1,2,3,4,5
   【这里有点难理解，多想一下，这里想通了就没毛病了】
   
5. 根据 array[index] 原理能取到数组具体值，也就是用 tabNow 联系到 每一个列表数组，并根据上文的index取到具体的列表项！
6. 最后就是在页面跳转的时候把拼接好的值带过去就行啦！
7. 在跳转的页面中，通过option获取到该参数
   

我想过重构一下数据组织的结构，比如将tabList直接和列表数组们联系起来，但是发现都不太好拿数据，于是琢磨出上述办法。