在微信小程序开发中当点击确定按钮的时候,使用console.log 将所有输入的结果,显示在控制台 当点击取消的时候,清空所有的数据 1、当提交执行结束后,尝试弹出提示,显示已经提交 2、尝试使用表单的方式,抓取组件的数据
时间: 2024-10-10 21:12:39 浏览: 57
在微信小程序中,当你需要在用户点击“确定”按钮时执行一些操作,并在点击“取消”时清除数据,可以按照以下步骤实现:
首先,在点击确定按钮时,可以在`success`回调中使用`console.log`打印信息,并处理数据提交:
```javascript
wx.showModal({
title: '提示',
content: '确定要提交信息吗?',
showCancel: true,
confirmText: '确定',
cancelText: '取消',
success: function(res) {
if (res.confirm) {
// 提交数据
const formData = form.getFieldsValue(); // 获取表单数据
console.log('用户选择了确定,提交的数据:', formData);
// 这里可以将数据发送到服务器或缓存中,然后提示用户提交成功
wx.showToast({
title: '提交成功',
duration: 1500,
});
} else if (res.cancel) {
// 清空数据
form.resetFields();
console.log('用户选择了取消,数据已清空');
}
},
});
```
这里假设你使用了Form组件来收集用户输入。`form.getFieldsValue()`用于获取当前表单的所有字段值。
对于第2点,你需要在表单组件上监听对应的事件来抓取数据,例如:
```html
<view class="form">
<!-- 使用wx:for循环渲染表单 -->
<view wx:for="{{fields}}" wx:key="*this">
<input type="text" bindinput="handleInputChange" placeholder="{{item.label}}"/>
</view>
</view>
<script>
Page({
data: {
fields: [
{label: '姓名'},
{label: '邮箱'},
// 其他字段...
],
// ...
},
handleInputChange(e) {
console.log(`输入的值:${e.detail.value}`);
// 更新数据
},
// ...
})
</script>
```
每当用户输入文本框,`handleInputChange`就会被调用,并将输入的值打印到控制台。
阅读全文