小程序开发--- 1. 获取数组中某个字段的值或获取列表索引

    最近开始自己琢磨开发微信小程序，遇到些问题，现在做一下总结。

    今天有遇到一个需要获取到列表中某一项值，并在其他地方调用的问题。其实思路和获取列表索引的道理一样。如果你还不知道如何获取列表的索引，那么现在我先给大家介绍一下：

    1. 大家都知道小程序的.wxss文件类似于css文件，主要用于处理视图的样式。所以，第一步，我们在.wxss文件中先随意写上一个样式，如下所示：

    

.a{
    width: 100%;
    background-color: #fff;
    margin-top: 20rpx;
}

这些就简单定义了一下视图出来的样式，具体样式由自己来定。

    2. 大家都知道小程序里的.js文件，主要用于书写一些变量或则功能，所以，第二步，我们在.js文件中定义一个索引变量，如下所示：

var idx
var taskList

page({
 data:{
    idx: 0, 
    taskList: ["A","B"],
},


selectIdx: function(e){
    idx= e.currentTarget.dataset.idx;
    this.setData({
     idx,
    })
    console.log(idx)
    console.log(e.currentTarget.dataset.idx)
  },

})

idx 是我定义的索引；taskList是我模拟的列表;selectIdx是我自己写的一个功能函数，来读取获取的索引。

3. 大家都知道小程序里的.wxml类似于网页端的html文件，主要用于处理一些页面显示的视图。所以，第三步，我们在.wxml里面开始处理UI，具体如下：

 <view class="a" wx:for-items = "{{taskList}}" wx:key="{{index}}" 
            data-idx = "{{index}}" bindtap="selectIdx">
    <view>获取到的索引:{{index}}</view>
</view>

      在这里通过data-xx的形式，我们给获取的索引进行了一个重命名，名字也叫idx，当然也可以取其他的名字，但是你懂的，代码里的命名不要是中文。接下来就不用我们在这个问题做些什么了。小程序会给我们把重命名的索引名存入点击事件event中。

4. 现在就可以直接Ctrl + S 来运行项目，你在console会看到下面的打印

0

0

这是你点条目一打印出来的结果，点条目二会打印出：

1

1

点条目一，页面上会出现：

获取到的索引：0

点条目二，则看到索引值为1

这下所以就获取到了。

---------------------------------------------------------------分割线---------------------------------------------------------------------

获取某个字段的值，其实很简单，道理跟获取索引一样，只需要在.wxml加些代码就行，然后回到.js文件去处理这个字段的值。如下所示：

 <view class="a" wx:for-items = "{{taskList}}" wx:key="{{index}}" 
            data-idx = "{{index}}" data-name = "{{taskList[index].name}}" bindtap="selectIdx">
    <view>获取到的索引:{{index}}</view>
</view>

这里的taskList好比是sever给的带键值对的数据，比如

[

    "name": " 阿黄",

    "sex": "男"

]

然后通过data-name = "{{taskList[index].name}}" 来获取这个字段的值，最后再.js文件的这个selectIdx功能函数中去处理这个name了。比如说：

selectIdx: function(e){
    idx= e.currentTarget.dataset.idx;
    var name = e.currentTarget.dataset.name;
    this.setData({
     idx,
    })
    console.log(idx)
    console.log(e.currentTarget.dataset.idx)
    console.log(name)
  },

好了，获取列表索引或列表的值的方法，就已经结束了。谢谢观赏。