最近开始自己琢磨开发微信小程序,遇到些问题,现在做一下总结。
今天有遇到一个需要获取到列表中某一项值,并在其他地方调用的问题。其实思路和获取列表索引的道理一样。如果你还不知道如何获取列表的索引,那么现在我先给大家介绍一下:
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)
},
好了,获取列表索引或列表的值的方法,就已经结束了。谢谢观赏。
更多推荐
小程序开发--- 1. 获取数组中某个字段的值或获取列表索引
发布评论