微信小程序实现调查问卷表单

微信小程序问卷调查表单

功能演示：

20220408_202155

index.wxml

<view id="container-top">
<view id="container-img">
<swiper indicator-dots="true" autoplay="true" interval="3000" indicator-active-color="black">
<swiper-item>
<image src="../../img/1.png" class="img"></image>
</swiper-item>
<swiper-item>
<image src="../../img/2.png" class="img"></image>
</swiper-item>
<swiper-item>
<image src="../../img/3.png" class="img"></image>
</swiper-item>
</swiper>
</view>
<form bindsubmit="formsubmit" bindreset="formreset">
<view>1、输入你的学号</view>
<input type="text" placeholder="请输入你的学号" name="code"/>
<view>2、输入你的姓名</view>
<input type="text" placeholder="请输入你的姓名" name="name"/>
<view>3、你是用手机的最大用途是什么</view>
<checkbox-group name="use">
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
  <label><checkbox value="{{item.val}}"/>{{item.val}}</label>
</block>
</checkbox-group>
<view>4、每天使用手机多少小时</view>
<slider value="0" show-value max="24" name="time"/>
<view>5、平常打不打球</view>
<radio-group name="ball">
  <label><radio value="打"/>打</label>
  <label><radio value="不打"/>不打</label>
</radio-group>
<view>6、谈谈目前课程所得</view>
<input type="text"  name="get" placeholder="请输入你的收获"/>
<view>7、这门课难不难</view>
<switch name="hard"/>
<view>
<button type="primary" class="button" form-type="submit" size="mini">点击提交</button>
<button type="primary" class="button" form-type="reset" size="mini">点击重置</button>
</view>
</form>
</view>
<view id="container-bottom">
<view>学号：{{code}}</view>
<view>姓名：{{name}}</view>
<view>所得：{{get}}</view>
<view>时长：{{time}}个小时</view>
<view>用途：{{use}}</view>
<view>打球：{{ball}}</view>
<view>难度：{{hard}}</view>

</view>

index.wxss

input{
  border: 1px black solid;
  margin-top: 2%;
  margin-bottom: 2%;
}

.button{
  display: inline-block;
  margin-left: 15%;
}

#container-top{
  height: 70%;
}
#container-bottom{
  height: 30%;
}
#container-img{
  width: 80%;
  margin-left: 15%;
}
.img{
  margin-left: 5%;
  margin-top: 5%;
  width: 90%;
  height: 90%;
  border-radius: 6%;
}

index.js

Page({
data:{
  code:"",
  name:"",
  use:[],
  time:"",
  ball:"",
  get:"",
  hard:"",
  items:[{val:"社交"},{val:"购物"},{val:"学习"},{val:"其他"},],
},

formsubmit:function(e){
this.setData({
  code:e.detail.value.code,
  name:e.detail.value.name,
  time:e.detail.value.time,
  ball:e.detail.value.ball,
  get:e.detail.value.get,
  hard:e.detail.value.hard,
  use:e.detail.value.use
})
},
formreset:function(e){
this.setData({
  code:"",
  name:"",
  use:"",
  time:"",
  ball:"",
  get:"",
  hard:""
})
}
})