置顶 Taro教程之开发一款相亲类微信小程序—出生年月选择页
发布于 1 年前 作者 JavaBird 822 次浏览 最后一次编辑是 10 个月前 来自 分享

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

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

实际效果图

年组件

这里我们将年分为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 获取完整教程以及代码仓库地址

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

老夫撸代码


版权声明:未经授权,不得转载

回到顶部