wx:for与wx:key和data-连用，解决多个二维数组共同传参的问题

目录

一、问题简述

二、数据介绍

三、实现过程

四、题外话

---

一、问题简述

        最近在尝试制作微信小程序，其中数据都是util.js里面调用函数生成的。然后在一个显示信息的界面就出现了问题：因为我要调用并显示两个数组里面的数据，这两个数组还都是二维数组，我思考了很久，从网上找了很久的资料，后来发现了一路大神的评论，极其简单的一句话就解决了我的问题（具体什么话我忘记了，但不是博客里找到的），所以我打算写这篇博客，记录一下自己解决的问题。

二、数据介绍

        我用的是两个二维数组，month和monthWork。其中每一个数组里面都是每七个成一个数组,数组中每个元素还是个字典，简单拿month举个例子：

month[[{a:1,b:2,c:3},{a:2,b:3,c:4},{a:3,b:4,c:5}...],

        [{a:1,b:2,c:3},{a:2,b:3,c:4},{a:3,b:4,c:5}...],

        [{a:1,b:2,c:3},{a:2,b:3,c:4},{a:3,b:4,c:5}...]]

以此类推，其中month与monthWork是同大小的二维数组，行列数相同，元素同样也是字典类型的。

三、实现过程

话不多说，直接上代码。我把自己的代码改了一下，仅供大家参考

month.wxml

<view class="preWeek" wx:for="{{month}}" wx:for-index="index1">
    <view class="preDay" wx:for="{{item}}" wx:for-index="index2">
        <view calss="everyWork" data-index1="{{index1}}" data-index2="{{index2}}" bindtap="onWorkTap">
            <view class="every">
                <!-- 以下是直接mastache语法的使用 -->
                <text>{{item.a}}</text>
                <text>{{monthWork[index1][index2].a}}</text>
                <!-- 以下是和wx:if连用 -->
                <view wx:if="{{item.a}}"></view>
                <view wx:if="{{item.a==1}}">可以连用判断，注意符号的位置</view>
            </view>
        </view>
    </view>
</view>

其中，以上代码第二行的item是指month的子元素，即month中的一维数组

而class="every"中的item指的是month中一维数组的子元素，

即本例数组中包含的字典{a:1,b:2,c:3}。

四、题外话

大家肯定也注意到data-index1="{{index1}}"了，下面简单介绍下我对data-的看法。

data-的使用一般为：

data-自定义的变量名=“此变量连接的数据”  在bindtap中连用，可在js文件里获取到传递的参数值，例如 ：

month.js

data:{
    month:[],
    monthWork:[]
},
onLoad(){
    //这里我定义了生成month和monthhWork数据的函数
    //对本博客无影响，所以省略了
},
onWorkTap(e){
    var index1 = e.currentTarget.dataset.index1
    var index2 = e.currentTarget.dataset.index2
},
...

格式为：

var 变量名（这个是可以在js文件里自定义的）= e.currentTarget.dataset.在data-后面的变量名

例如在js中我也可以这样写：

var a = e.currentTarget.dataset.index1

var b = e.currentTarget.dataset.index2

当然也可以用这两个index获取js中data里定义的数据：

//第一个a是自定义的变量名，第二个a是monthWork二位数组里对应位置字典的值
var a = monthWork[index1][index2].a

如有错误，请在评论区指出

如果大家还有什么更好的更方便的做法，也请在评论区指个路，大家共同学习！