Taro教程之相亲类微信小程序开发实战-06出生年月选择页

欢迎关注微信公众号 老夫撸代码
前面我们讲到 使用Taro开发一款相亲类微信小程序-省市区选择页
今天我们接着开发出生年月日选择页

因为老夫不是UI设计师，所以一些设计方面的内容，老夫就参考了一下其他小程序的样子，在这里老夫参考的是百合网小程序。
老夫的整个教程的目地就是简单的交流学习 Taro 开发小程序，请各位理解。

实际效果图

image
image
image

年组件

这里我们将年分为40后、50后、60后、70后、80后和90后，其他的就是写css样式，我们直接上代码。
在components的文件夹中创建year文件夹，然后新建如下文件：

1. src/components/year/year.js
2. src/components/year/year.less

year.js代码如下

import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

import './year.less'

/**
 * 选择年
 */
class Year extends Component {


  state={
      yearlist:[],
  }

  generateYearList(number,year){

    let list = []

    for(let i =0; i < 10; i ++ ){

        list.push("" + year + number);

        number++

    }

    return list
  }

  setYear(year){
    this.props.onChoose(year)

  }

  render() {

    const { number , year, year_value } = this.props;

    const list = this.generateYearList(number,year)

    return (
      <View className="container">
        <View className="left">
          <View className="left-1">{number}</View>
          <View className="left-2">后</View>
          <View className="left-3" />
        </View>
        <View className="right" >
           {
             list.map(n => {
               return <View onClick={this.setYear.bind(this, n)} className={year_value == n? "item choose":"item"} key={n}>
                   {n}
                 </View>;
             })
           }
        </View>
      </View>
    );
  }
}
export default Year

代码解析：

1. generateYearList(number,year) 生成年的列表
2. setYear(year) 把数据传递给父组件

样式代码就不贴了代码都以上传 github .

月组件

因为每年就12个月是固定的，所以我们便利一个数组出来即可。
在components的文件夹中创建month文件夹，然后新建如下文件：

1. src/components/month/month.js
2. src/components/month/month.less

month.js代码如下：

import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

import "./month.less";

/**
 * 选择月
 */
class Month extends Component{

    componentDidMount(){

    }



    generateNumber(){

        let list = []

        for(let i = 1; i < 13; i++){

            list.push(i)

        }

        return list

    }
    selectMonth(n){

        this.props.onSelect(n)

    }


  render(){

    const { value } = this.props

     let list = this.generateNumber()

      return <View className="container">

          <View className="right" >
              {
                  list.map(n => {
                      return <View onClick={this.selectMonth.bind(this,n)} className={value == n ? "item choose" : "item"} key={n}>
                          {n}
                        </View>;
                  })
              }
          </View>
      </View>
  }

}

export default Month

代码解析：

1. generateNumber() 生成12个月
2. selectMonth() 传递数据到父组件

样式代码就不贴了代码都以上传 github

搜索微信公众号：老夫撸代码 回复数字 1006 获取完整教程以及代码仓库地址

关注微信公众号：老夫撸代码

老夫撸代码

---