1、案例描述

使用picker自定义组件以及自定义函数来设计一个上传显示个人信息的功能页面

2、实现过程

2.1、代码展示

• wxml

<!--pages/kj/demo111-template/index.wxml-->
<view class="box">
  <view class="title">个人信息填写</view>
  <view class="in">
    <text>姓名：</text>
    <input type="text" placeholder="请输入姓名" bindblur="input_name" />
  </view>

  <picker class="picker_class" mode="selector" range="{{gender}}" bindchange="pickerSex">性别：{{yemian_sex}}</picker>

  <picker class="picker_class" mode="region" bindchange="pickerRegion">籍贯：{{yemian_home}}</picker>

  <picker class="picker_class" mode="date" start="1900-1-1" end="1908-1-1" bindchange="pickerBirthday">出生日期：{{yemian_birthday}}</picker>

  <picker class="picker_class" mode="time" start="00:00" end="23:59" bindchange="pickerBirthdayTime">出生时间：{{yemian_birthdayTime}}</picker>

  <view class="in">
    <text>身高：</text>
    <input type="number" placeholder="请输入身高（cm）" bindblur="input_height" />
  </view>
  <view class="in">
    <text>体重：</text>
    <input type="number" placeholder="请输入体重（kg）" bindblur="input_weight" />
  </view>
  <button type="primary" bindtap="submit_person">显示个人信息</button>
  <view class="result" hidden="{{hidden_flag}}">
    <text>姓名：{{p.name}}</text>
    <text>性别：{{p.sex}}</text>
    <text>籍贯：{{p.home}}</text>
    <text>出生日期：{{p.birthday}}</text>
    <text>身高：{{p.height}}</text>
    <text>体重：{{p.weight}}</text>
  </view>

</view>

• wxss

/* pages/kj/demo111-template/index.wxss */
.in{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
input{
    border-bottom: 1px solid black;
    margin: 10px;
}
.button_submit{
    margin:50px 10px,

}
.picker_class{
    margin-bottom: 5px;
}
.result{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: rgb(160, 158, 158);
}

• js

// pages/kj/demo111-template/index.js
function Person(name,sex,home,birthday,height,weight,time){
  this.name = name;
  this.sex = sex;
  this.home = home;
  this.birthday = birthday;
  this.height = height;
  this.weight = weight;
  this.birthdayTime = time;
}
var hidden_flag = true;
var gender = ['男','女'];
var yemian_sex = '';
var yemian_home = '';
var yemian_birthday = '';
var yemian_birthdayTime = '';

Page({
  data: {
    hidden_flag : hidden_flag,
    gender : gender
  },
  input_name:function(e){
    this.name = e.detail.value;
    console.log(e.detail.value)
  },
  pickerSex:function(e){
    this.sex = gender[e.detail.value]
    this.setData({
      yemian_sex : this.sex
    })
    console.log(e.detail.value)
  },
  pickerRegion:function(e){
    this.home = e.detail.value;
    console.log(e.detail.value);
    this.setData({
      yemian_home : this.home
    })
  },
  pickerBirthday:function(e){
    this.birthday = e.detail.value;
    console.log(e.detail.value)
    this.setData({
      yemian_birthday : this.birthday
    })
  },
  pickerBirthdayTime:function(e){
    this.birthdayTime = e.detail.value;
    this.setData({
      yemian_birthdayTime : this.birthdayTime
    })
  },
  input_height:function(e){
    this.height = e.detail.value;
    console.log(e.detail.value) 
  },
  input_weight:function(e){
    this.weight = e.detail.value;
    console.log(e.detail.value)
  },
  submit_person:function(e){
    //用new关键字创建对象。
    var p = new Person(this.name,this.sex,this.home,this.birthday,this.height,this.weight)
    hidden_flag = false;
    this.setData({
      hidden_flag : hidden_flag,
      p : p //把构造的对象传递到页面
    })
  }
 
  
})

2.2、结果展示

结果展示.png

3、知识汇总

知识要点.png picker组件.png 普通选择器的属性.png 日期选择器.png 省市区选择器.png 时间选择器.png 自定义构造函数.png 自定义构造函数的创建和使用.png

4、踩坑说明：

• picker组件的使用需要设置的属性有：mode属性（selector / multiSelector / data / region / time），如果mode="selector"需要继续说明range属性，也就是告诉picker选择器从哪里去挑数据；mode="multiSelector"没用过，还不清楚用途，如果mode="data"或者mode="time"，要按照格式设定star和end；mode="region"，就不用设置太多。最后要注意，每个picker选择器，都需要绑定一个函数：bindchange="函数名"给js文件中输入选择器选出的值。
• 在这个案例中使用的构造函数，作用一：用“this.变量名”的形式可以制作全局变量。作用二：通过构造函数可以创建一个对象，格式就是加上在构造函数前面加new关键字，这个构造函数就会被创建为一个对象。这个对象可以用“.”来调用。
• 发现一个问题，在wxml当中使用的绑定数据，如果在js当中没有用var来定义，通过this.setData({})来渲染的时候，同样可以渲染到页面上。但是在wxml当中使用的变量，最好先在js中用var定义一下。