微信小程序通过表单 获取Input框内的值,将多条数据存储在缓存中,返回到另一个页面并显示出来
时间: 2024-03-26 17:34:26 浏览: 134
微信小程序使用form表单获取输入框数据的实例代码
可以通过以下步骤实现:
1. 在表单中给每个输入框设置一个唯一的id,方便后面获取输入框的值。
2. 在提交表单的时候,获取每个输入框的值,并将这些值存储在一个数组中。
3. 使用小程序的缓存API,将数组存储到缓存中。
4. 跳转到另一个页面后,在onLoad生命周期函数中,获取缓存中的数组数据。
5. 在另一个页面中渲染数组中的每一项数据。
下面是一个示例代码:
在第一个页面的wxml中:
```
<form bindsubmit="onSubmit">
<input id="input1" type="text" placeholder="输入框1" />
<input id="input2" type="text" placeholder="输入框2" />
<button formType="submit">提交</button>
</form>
```
在第一个页面的js中:
```
onSubmit: function(event) {
const input1 = event.detail.value.input1;
const input2 = event.detail.value.input2;
const inputs = [input1, input2];
wx.setStorageSync('inputs', inputs);
wx.navigateTo({
url: '/pages/result/result'
});
}
```
在第二个页面的js中:
```
onLoad: function() {
const inputs = wx.getStorageSync('inputs');
this.setData({
inputs: inputs
});
}
```
在第二个页面的wxml中:
```
<view wx:for="{{inputs}}" wx:key="{{index}}">
<text>{{item}}</text>
</view>
```
这样,就可以将多条数据存储在缓存中,并在另一个页面中显示出来了。
阅读全文