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

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

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

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

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

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

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

var idx
var taskListpage({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)},

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

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

小程序开发之删除数组中某个元素
因为小程序里面不是用remove这个方法,所以特别提一下. 改用splice这个方法来删除数组中的元素. 因为是要删除数组里面特定元素,所以我们先用findeIndex这个方法查询到指定元素所在集合中 ...
微信小程序js数组初始化_微信小程序开发之改变data中数组或对象的某一属性值...
前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下: wxml如下: {{item.we ...
微信小程序更新二维数组中的对象或数组的属性值
微信小程序更新二维数组中的对象或数组的属性值,这里可能有两种情况 1.微信小程序更新二维数组中的对象的属性值更新二维数组中的某个对象的属性值,代码如下 js 代码 data: {familys:[{ ...
java解析sql查询字段_sql解析json格式字段如何获取json中某个字段的值？
java将json数据解析为sql语句?小编给你倒一杯热水.可你惦记着其他饮料,所以你将它放置一旁.等你想起那杯水时,可惜它已经变得冰冷刺骨. 图片中是json数据,每个数据的开头都有表名称,操作类型 ...
Oracle怎么获取json类型字符串值,sql解析json格式字段如何获取json中某个字段的值？...
java将json数据解析为sql语句?小编给你倒一杯热水.可你惦记着其他饮料,所以你将它放置一旁.等你想起那杯水时,可惜它已经变得冰冷刺骨. 图片中是json数据,每个数据的开头都有表名称,操作类型 ...
php获取数组中的全部可以吗,php获取数组中所有值的方法
php的数组操作函数array_values 可以提取一个数组中所有元素值,具体的使用方法,可以参考下面的教程. array_values() 函数的作用是返回数组中所有元素的值,使用起来非常简单,只 ...
微信小程序this.setData修改对象中某个属性的值
前言做过微信小程序的同学都知道,this.setData() 方法可以修改或者更新 data 中的值 .那不知道大家有没有遇到这么一种情况,我要修改对象中某个属性的值该怎么办呢?是不是第一想到的就是 ...
微信小程序 setData动态设置数组中的数据
现在有一组死数据但是想在使用时动态修改其中的值在setData中不能直接设置,真想......,算了是这个和谐的社会救了那个工程师. 接下来,我们去征服她! 死数据: //地图上方控件contro ...
【微信小程序】JavaScript 从数组中删除指定值元素的方法封装
效果 const somearray = ["mon", "tue", "wed", "thur"] removeByV ...

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

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

最新文章

热门文章