刚学,请问这个无法显示是哪里有问题?
wxss
.container {
height:100vh; /*高度为100视窗,写为100%无效*/
background-color:white; /*背景颜色*/
display: flex; /*flex布局模型*/
flex-direction: column; /*垂直布局*/
padding: 20rpx 20rpx; /*上下外边距为20rpx,左右为20rpx*/
align-content: center; /*居中对齐*/
justify-content:center;
}
/*列表组样式*/
.listGroup {
background-color:white; /*背景颜色*/
margin: 20rpx 0; /*上下外边距为20rpx,左右为0*/
}
.row{
display: flex;
flex-direction:row;
}
/*列表项单行样式*/
.box {
width:62vh; /*宽度为62视窗,写为100%无效*/
border-bottom:1rpx solid silver; /*1rpx宽的银色实线边框*/
padding: 10rpx; /*内边距10rpx*/
height:80rpx;
}
.shortInput {
width:30vh;
}
.label{
color:#FF2D55;
margin-right:25rpx;
}
wxml
<view class='container'>
<view class='listGroup' >
<view class='row box' >
<text>待定</text>
</view>
</view>
<view class='listGroup' >
<view class='row box' >
<label>姓别</label>
<picker name='sex'mode='selector'bindchange='sexChange'range='{{sexItem}}'>
<view>{{sexItem}}</view>
</picker>
</view>
<view class='row box' >
<label>年龄</label>
<picker name='age'mode='selector'bindchange='ageChange'range='{{ageItem}}'>
<view>{{ageItem}}</view>
</picker>
</view>
<view class='row box' >
<label>类别</label>
<picker name='genre'mode='selector'bindchange='genreChange'range='{{genreItem}}'>
<view>{{genreItem}}</view>
</picker>
</view>
</view>
<view class='listGroup' >
<view class='row box' >
<label>身高</label>
<input name='height'class='shortInput'type='digit'value='{{height}}'></input>
<text>厘米</text>
</view>
<view class='row box' >
<label>体重</label>
<input name='weight'class='shortInput'type='digit'value='{{weight}}'></input>
<text>千克</text>
</view>
</view>
</view>
js
Page({
data: {
sexItem:['男','女'],
ageItem:['24岁以下','25-29岁','30-39岁','40-49岁','50-59岁','60岁以上'],
genreItem:['一类人员','二类人员','三类人员']
},
"getInput":function(e){
console.log("getInput触发,输入框内容改变,当前值为:"+e.detail.value);
},
"sexChange":function(e){
let i=e.detail.value; //获取选项的数组下标
let value=this.data.sexItem[i]; //获取选项的值
this.setData({selector:value}); //将选项的名称更新到WXML页面上
},
"ageChange":function(e){
let i=e.detail.value; //获取选项的数组下标
let value=this.data.ageItem[i]; //获取选项的值
this.setData({selector:value}); //将选项的名称更新到WXML页面上
},
"genreChange":function(e){
let i=e.detail.value; //获取选项的数组下标
let value=this.data.genreItem[i]; //获取选项的值
this.setData({selector:value}); //将选项的名称更新到WXML页面上
}
})