发表于： 2017-04-24 15:34:55
6 1160
今天完成的事情：
今天把个人条件选择页的页面进行CSS样式美化，重新看了W3CSHOOL里CSS样式。
比较了表单组件form和button组件，用了表单组件form来将组件内的用户输入的<picker/> 提交，form组件的submit按钮用于提交数据，reset按钮不需要。
明天计划的事情：
表单提交数据如何表现正常。
遇到的问题：
submit按钮提交后的数据不知道为啥很奇怪？不是正常的数据
收获：
表单组件的用法，重新学了CSS样式
代码：
WXML：
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section1">
<text class="button-text">试试什么职业最适合你</text>
</view>
<view class="section">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
学 历： {{array[index]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange1" value="{{index1}}" range="{{array1}}">
<view class="picker">
性 别： {{array1[index1]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange2" value="{{index2}}" range="{{array2}}">
<view class="picker">
年 龄：{{array2[index2]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange3" value="{{index3}}" range="{{array3}}">
<view class="picker">
基 础：{{array3[index3]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange4" value="{{index4}}" range="{{array4}}">
<view class="picker">
专 业：{{array4[index4]}}
</view>
</picker>
</view>
<view class="section">
<picker bindchange="bindPickerChange5" value="{{index5}}" range="{{array5}}">
<view class="picker">
逻 辑：{{array5[index5]}}
</view>
</picker>
</view>
<view class="section1">
<button formType="submit">选好了，点击查看</button>
</view>
</form>
<view class="section1">
<text class="button-text">获得的数据：{{fv}} </text>
</view>
WXSS：
.section {
font-family:"Trebuchet MS", Arial, Helvetica, 微软雅黑, sans-serif;
width:100%;
border-collapse:collapse;
font-size:1em;
border:1px solid #FFFFFF;
padding:5px 17px 6px 17px;
color:#000000;
background-color:#EAF2D3;
}
.section1 {
font-family:"Trebuchet MS", Arial, Helvetica, 微软雅黑, sans-serif;
text-align:center;
padding:5px 0px 6px 0px;
}
JS：
Page({
data: {
array: ['大专', '本科', '硕士', '博士'],
objectArray: [
{
id: 0,
name: '大专'
},
{
id: 1,
name: '本科'
},
{
id: 2,
name: '硕士'
},
{
id: 3,
name: '博士'
}
],
index: 0,
array1: ['男', '女'],
objectArray1: [
{
id: 0,
name: '男'
},
{
id: 1,
name: '女'
}
],
index1: 0,
array2: ['18岁以下', '18~24岁', '25~30岁', '30岁以上'],
objectArray2: [
{
id: 0,
name: '18岁以下'
},
{
id: 1,
name: '18~24岁'
},
{
id: 2,
name: '25~30岁'
},
{
id: 3,
name: '30岁以上'
}
],
index2: 0,
array3: ['零基础', '绘画基础', '网络相关', '原型设计'],
objectArray3:[
{
id: 0,
name: '零基础'
},
{
id: 1,
name: '绘画基础'
},
{
id: 2,
name: '网络相关'
},
{
id: 3,
name: '原型设计'
}
],
index3:0,
array4:['无专业','计算机相关','理工科','文科'],
objectArray4:[
{
id:0,
name:'无专业'
},
{
id:1,
name:'计算机相关'
},
{
id:2,
name:'理工科'
},
{
id:3,
name:'文科'
}
],
index4:0,
array5:['渣渣','普通','卓越'],
objectArray5:[
{
id:0,
name:'渣渣'
},
{
id:1,
name:'普通'
},
{
id:3,
name:'卓越'
}
],
index5:0
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindPickerChange1: function(f) {
console.log('picker性别发送选择改变，携带值为', f.detail.value)
this.setData({
index1: f.detail.value
})
},
bindPickerChange2: function(g) {
console.log('picker年龄发送选择改变，携带值为', g.detail.value)
this.setData({
index2: g.detail.value
})
},
bindPickerChange3: function(h) {
console.log('picker基础发送选择改变，携带值为', h.detail.value)
this.setData({
index3: h.detail.value
})
},
bindPickerChange4:function(i){
console.log('picker专业发送选择改变，携带值为', i.detail.value)
this.setData({
index4:i.detail.value
})
},
bindPickerChange5:function(j){
console.log('picker专业发送选择改变，携带值为', j.detail.value)
this.setData({
index5:j.detail.value
})
},
formSubmit: function(h) {
console.log('form发生了submit事件，携带数据为：', h.detail.value)
this.setData({
fv:h.detail.value
})
},
})
返回列表
评论