微信小程序循环input
时间: 2023-08-21 16:02:40 浏览: 182
你可以使用wxs模块中的for循环来实现微信小程序中input框的循环。具体步骤如下:
1. 在wxml文件中使用for循环生成input框,代码如下:
```
<view wx:for="{{inputList}}" wx:key="{{index}}">
<input placeholder="请输入" value="{{item}}" bindinput="inputChange" data-index="{{index}}" />
</view>
```
其中,inputList是一个数组,里面存放了每个input框的值。
2. 在js文件中定义inputList数组,并在页面加载时初始化inputList,代码如下:
```
Page({
data: {
inputList: ['']
},
onLoad: function () {
this.setData({
inputList: ['', '', ''] // 初始化3个input框
})
},
inputChange: function (e) {
const index = e.currentTarget.dataset.index
const value = e.detail.value
const inputList = this.data.inputList
inputList[index] = value
this.setData({
inputList: inputList
})
}
})
```
其中,inputChange是input框值改变时的回调函数,它通过e.currentTarget.dataset.index获取当前input框的下标,并通过e.detail.value获取当前input框的值,最后更新inputList数组并更新页面数据。
这样,就可以实现微信小程序中input框的循环了。
阅读全文