菜鸟学习之picker组件【年龄，地址，星座】

在刚开始接触小程序时，自己是懵的，不知道怎么写，也不知道从哪入手，很多web端的东西在这里都行不通，官方文档也很简单，很多东西都要自己去摸索，看别人做的样式啥的都很好看，自己就尝试做了下面的界面

效果图：

.wxml代码

<view class='border'></view>
    <view class='infos'><text>年龄</text>
      <view class="input">
        <picker mode="date" value="{{time}}" start="1870-01-01" end bindchange="bindTimeChange">
          <input type='text' name="age" value='{{time}}' ></input>
        </picker>
      </view>
      <text class='href'>></text></view>
    <view class='border'></view>

    <view class='infos'><text>性别</text>
      <view class="input">
        <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
          <input type='text' name="gender" value='{{array[index]}}' ></input>
        </picker>
      </view>
      <text class='href'>></text></view>
    <view class='border'></view>

    <view class='infos'><text>地址</text>
      <view class="input">
        <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
          <input type='text' name="address" value='{{region[0]}}--{{region[1]}}--{{region[2]}}'></input>
        </picker>
      </view>      
      <text class='href'>></text></view>
    <view class='border'></view>

    <view class='infos'><text>星座</text>
      <view class="input">
        <picker  bindchange="bindChange" value="{{areaIndex}}" range="{{area}}">
          <input type='text' name="star" value='{{area[areaIndex]}}' readonly="readonly" ></input>
        </picker>
      </view>
      <text class='href'>></text></view>
    <view class='border'></view>

.JS文件【bindchange绑定的函数必不可少，否则不能选中】

/**
   * 页面的初始数据
   */
  data: {
    array: ['请选择','保密','女','男'],
    index:0,
    areaIndex: 0,
    area: ['请选择','白羊座', '金牛座', '双子座', '巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座'],
    status:0,
    sign:0,
    work:0,
    tc:0,
    hobby:0,
    region: ['湖北省', '武汉市', '武昌区'],
    customItem: '全部'
  },
// 星座
  bindChange: function (e) {
    this.setData({
      areaIndex: e.detail.value
    })
  },
  // 性别
  bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
    })
  },
  // 地区
  bindRegionChange: function (e) {
    this.setData({
      region: e.detail.value
    })
  },
  // 年龄
  bindTimeChange: function (e) {
    // 选择的时间
    var sel_time = e.detail.value
    //获取当前时间
    var newdate = new Date();//今天
    var mybirthday = new Date(sel_time);//出生日期
    var age = newdate.getTime() - mybirthday.getTime();
    //向下取整   获取年龄
    var real_age =  Math.floor(age / 1000 / 60 / 60 / 24 / 365);
    this.setData({
      time: real_age
    })
  },
  /* 文本框聚焦时更改状态*/
  focus: function (e) {
    this.setData({
      status: 1
    })
  },
  focus_hobby: function (e) {
    this.setData({
      hobby: 1
    })
  },
  focus_work: function (e) {
    this.setData({
      work: 1
    })
  },
  focus_tc: function (e) {
    this.setData({
      tc: 1
    })
  },
  focus_sign: function (e) {
    this.setData({
      sign: 1
    })
  },
  /* 文本框失焦时更改状态*/
  blur: function (e) {
    this.setData({
      status: 0,
      sign: 0,
      work: 0,
      tc: 0,
      hobby: 0
    })
  }

.wxss文件

.info .infos{padding: 3%;color: #8D8A89;font-size: 14px;}
.info .img{padding: 0;padding-left: 3%;height:100rpx;line-height: 100rpx;color: #8D8A89;font-size: 14px;}
/*箭头  */
.href{float: right;margin-right:3%;margin-top:-7%;}
/*输入框  */
.input{width: 75%;margin-top: -7%;margin-left: 15%;}
.input input{text-align: right;}
.sign{width: 75%;margin-top: -7%;margin-left: 20%;}
.sign input{text-align: right;padding-right:7%;}
/*点击后的样式  */
.inputs{width: 75%;margin-top: -7%;margin-left: 15%;}
.signs{width: 75%;margin-top: -7%;margin-left: 20%;}
.border{background:#CCC;height:1px;}/*分割线*/
/*图像*/ 
.avatar{border-radius:50%;width:100rpx;height:100rpx;margin-right:3%;margin-left:64%}