写一个调查问卷的微信小程序,需要包括button,checkbox,form,input,picker,picker-view,radio,slider,swider,switch,textarea这十种表单组件,要求提交之后可以看到结果
时间: 2023-10-08 19:12:27 浏览: 57
好的,下面是一个简单的调查问卷微信小程序示例代码:
```xml
<!-- index.wxml -->
<view class="container">
<form bindsubmit="submitForm">
<view class="form-group">
<text class="label">姓名:</text>
<input type="text" name="name" placeholder="请输入您的姓名" />
</view>
<view class="form-group">
<text class="label">性别:</text>
<radio-group name="gender">
<label class="radio-label">
<radio value="male" checked />男
</label>
<label class="radio-label">
<radio value="female" />女
</label>
</radio-group>
</view>
<view class="form-group">
<text class="label">年龄:</text>
<picker mode="selector" bindchange="ageChange" value="{{ ageIndex }}" range="{{ ageArray }}">
<view class="picker">{{ ageArray[ageIndex] }}</view>
</picker>
</view>
<view class="form-group">
<text class="label">兴趣爱好:</text>
<checkbox-group name="hobbies" bindchange="hobbiesChange">
<label class="checkbox-label">
<checkbox value="reading" />阅读
</label>
<label class="checkbox-label">
<checkbox value="sports" />运动
</label>
<label class="checkbox-label">
<checkbox value="music" />音乐
</label>
<label class="checkbox-label">
<checkbox value="traveling" />旅游
</label>
</checkbox-group>
</view>
<view class="form-group">
<text class="label">意见反馈:</text>
<textarea name="feedback" placeholder="请输入您的意见反馈"></textarea>
</view>
<view class="form-group">
<button formType="submit">提交</button>
</view>
</form>
</view>
```
```javascript
// index.js
Page({
data: {
ageArray: ['18岁以下', '18-25岁', '26-35岁', '36-45岁', '46岁以上'],
ageIndex: 0,
hobbies: []
},
ageChange: function (e) {
this.setData({
ageIndex: e.detail.value
})
},
hobbiesChange: function (e) {
this.setData({
hobbies: e.detail.value
})
},
submitForm: function (e) {
console.log('表单提交数据:', e.detail.value)
wx.showToast({
title: '提交成功',
icon: 'success',
duration: 2000
})
}
})
```
```css
/* index.wxss */
.container {
padding: 20rpx;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.label {
width: 120rpx;
}
.radio-label, .checkbox-label {
display: flex;
align-items: center;
margin-right: 20rpx;
}
.radio-label:last-child, .checkbox-label:last-child {
margin-right: 0;
}
.picker {
margin-left: 10rpx;
}
textarea {
width: 100%;
height: 200rpx;
padding: 10rpx;
border: 1rpx solid #ddd;
border-radius: 5rpx;
outline: none;
resize: none;
background-color: #f9f9f9;
}
button {
display: inline-block;
padding: 10rpx 20rpx;
border: none;
border-radius: 5rpx;
background-color: #007aff;
color: #fff;
font-size: 16rpx;
outline: none;
cursor: pointer;
}
```
其中,`picker` 组件需要在 `onLoad` 生命周期中初始化 `ageArray` 和 `ageIndex` 数据,示例代码如下:
```javascript
// index.js
Page({
onLoad: function () {
const ageArray = ['18岁以下', '18-25岁', '26-35岁', '36-45岁', '46岁以上']
this.setData({
ageArray: ageArray,
ageIndex: 0
})
}
})
```
提交表单后,可以在 `submitForm` 函数中打印出表单数据,并通过 `wx.showToast` 显示提交成功的提示信息。如果需要将表单数据保存到服务器或本地存储中,可以在 `submitForm` 函数中进行相应的处理。