收藏
回答

刚学,请问这个无法显示是哪里有问题?

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页面上
  }
})

回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-CJiang
    社区技术运营专员-CJiang
    02-16

    你好,麻烦提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    02-16
    有用
    回复
  • brave
    brave
    02-15

    看不懂你这么写的意思

    02-15
    有用
    回复 3
    • 。
      02-16
      这个是书上看到的事例,就照着写一下。。。其实不是很明白啦。。
      02-16
      回复
    • brave
      brave
      02-16回复
      书难道不会出错?照搬书中写的?还是好好去B站或者腾讯课堂找小程序基础教学的视频学习一下,最起码先把基础打好,不然每次都不知道怎么写
      02-16
      回复
    • 。
      发表于移动端
      02-16回复brave
      好的,谢谢大佬的批评指正
      02-16
      回复
  • Vinlic
    Vinlic
    02-15

    请发表代码片段,这样我们难以复现问题,项目》新建代码片段

    02-15
    有用
    回复
登录 后发表内容
问题标签