帮我用微信小程序写一个性别的单选表单,key是index
时间: 2024-03-13 17:45:09 浏览: 46
微信小程序实现单选功能
好的,这里是一个简单的微信小程序代码,包含了一个单选表单,key为index,供您参考:
```
<view class="radio-group">
<view class="radio-item" wx:for="{{genderList}}" wx:key="index">
<radio-group bindchange="radioChange" data-index="{{index}}">
<label>
<radio value="{{item.value}}" checked="{{item.checked}}"></radio>
{{item.name}}
</label>
</radio-group>
</view>
</view>
Page({
data: {
genderList: [
{
name: '男',
value: 'male',
checked: false
},
{
name: '女',
value: 'female',
checked: false
}
]
},
radioChange: function (e) {
var index = e.currentTarget.dataset.index;
var genderList = this.data.genderList;
for (var i = 0, len = genderList.length; i < len; ++i) {
genderList[i].checked = genderList[i].value == e.detail.value;
}
this.setData({
genderList: genderList
});
}
})
```
在这个代码中,我们首先在视图层定义了一个 `radio-group`,并使用 `wx:for` 循环展示了两个单选项,其中 `wx:key` 的值为 `index`。在数据层,我们定义了一个 `genderList` 数组,其中包含了两个单选项的相关信息,包括 `name`、`value` 和 `checked`。当用户点击某个单选项时,我们会触发 `bindchange` 事件,获取到该单选项的 `index` 值,并根据用户的选择更新 `genderList` 数组中 `checked` 属性的值,最后使用 `setData` 方法更新视图层中的数据。
阅读全文