Taro教程之相亲类微信小程序—07获取微信绑定手机号

欢迎关注微信公众号 老夫撸代码
前面我们讲到 使用Taro开发一款相亲类微信小程序-出生年月选择页，
今天我们开发功能有：身高、学历、婚姻状况、月收入以及获取微信绑定手机号

实际效果截图

QQ20190129-151234.png
QQ20190129-151258.png
QQ20190129-151331.png
QQ20190129-151355.png
QQ20190129-151433.png
QQ20190129-151511.png

身高选择页

我们将身高分为6个部分：150、160、170、180、190、200。
每部分是从1到9，以150为例子：150、151、152、153、154、155、156、157、158、159
当然我们也要兼顾150以下的，所以我们在150的前面加一项 149以下，作为覆盖150以下身高人群的选项。

身高组件

新建如下文件：

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

height.js

import Taro, { Component } from "@tarojs/taro"
import { View } from "@tarojs/components"
import './height.less'
class Height extends Component{
    getlist(start,length){

        let list = []

        list.push(start)

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

            start += 1

            list.push(start)

        }

        return list


    }

    setHeight(h){
        this.props.onChoose(h)

    }


    render(){

        const { height_value } = this.props

        return (
            <View className="warper">

                <View className="container">
                    <View className="left">
                        <View className="left-1">150</View>
                        <View className="left-2">cm</View>
                        <View className="left-3" />
                    </View>
                    <View className="right" >
                        <View onClick={this.setHeight.bind(this, n)} className={height_value == "149以下" ? "item choose" : "item"} style='padding-left:10px;padding-right:10px'>149以下</View>
                        {
                            this.getlist(150,9).map(n => {
                                return <View onClick={this.setHeight.bind(this, n)} className={height_value == n ? "item choose" : "item"} key={n}>
                                    {n}
                                </View>;
                            })
                        }
                    </View>
                </View>
                <View className="container">
                    <View className="left">
                        <View className="left-1">160</View>
                        <View className="left-2">cm</View>
                        <View className="left-3" />
                    </View>
                    <View className="right" >
                        {
                            this.getlist(160, 9).map(n => {
                                return <View onClick={this.setHeight.bind(this, n)} className={height_value == n ? "item choose" : "item"} key={n}>
                                    {n}
                                </View>;
                            })
                        }
                    </View>
                </View>
                <View className="container">
                    <View className="left">
                        <View className="left-1">170</View>
                        <View className="left-2">cm</View>
                        <View className="left-3" />
                    </View>
                    <View className="right" >
                        {
                            this.getlist(170, 9).map(n => {
                                return <View onClick={this.setHeight.bind(this, n)} className={height_value == n ? "item choose" : "item"} key={n}>
                                    {n}
                                </View>;
                            })
                        }
                    </View>
                </View>
                <View className="container">
                    <View className="left">
                        <View className="left-1">180</View>
                        <View className="left-2">cm</View>
                        <View className="left-3" />
                    </View>
                    <View className="right" >
                        {
                            this.getlist(180, 9).map(n => {
                                return <View onClick={this.setHeight.bind(this, n)} className={height_value == n ? "item choose" : "item"} key={n}>
                                    {n}
                                </View>;
                            })
                        }
                    </View>
                </View>
                <View className="container">
                    <View className="left">
                        <View className="left-1">190</View>
                        <View className="left-2">cm</View>
                        <View className="left-3" />
                    </View>
                    <View className="right" >
                        {
                            this.getlist(190, 9).map(n => {
                                return <View onClick={this.setHeight.bind(this, n)} className={height_value == n ? "item choose" : "item"} key={n}>
                                    {n}
                                </View>;
                            })
                        }
                    </View>
                </View>
                <View className="container">
                    <View className="left">
                        <View className="left-1">200</View>
                        <View className="left-2">cm</View>
                        <View className="left-3" />
                    </View>
                    <View className="right" >
                        {
                            this.getlist(200, 9).map(n => {
                                return <View onClick={this.setHeight.bind(this, n)} className={height_value == n ? "item choose" : "item"} key={n}>
                                    {n}
                                </View>;
                            })
                        }
                        <View onClick={this.setHeight.bind(this, n)} className={height_value == "210以上" ? "item choose" : "item"} style='padding-left:10px;padding-right:10px'>
                            210以上
                        </View>
                    </View>
                </View>


            </View>
           
        )
    }

}

export default Height

代码解析：

1. getlist 传入生成身高的开始值和步长，比如150，9
2. setHeight 将数据传递给父组件

height.less

.container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    height: 308px;
    .left{
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 30px;
        box-sizing: border-box;
        color: #FF4D56;
        .left-2{
            font-size: 28px;
        }
        .left-3{
            width: 2px;
            flex: 1;
            background-color: #FF4D56;
        }
    }
    .right{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        .item{
            box-sizing: border-box;
            padding: 30px;
            width: 25%;
            font-size: 28px;
            border-right: 1px solid #f2f2f2;
            border-bottom: 1px solid #f2f2f2;
            text-align: center;
        }
        view:nth-last-child(1){
            border-bottom: none;
        }
        view:nth-last-child(2){
            border-bottom: none;
        }
        .choose{
            color: #ffffff;
            background-color: #FF4D56;
           
        }
    }

}

注意如果不需要Taro进行转换就把px改为PX.

身高页

新建如下文件：

1. src/pages/height/height.js
2. src/pages/height/height.less

height.js

import Taro, {Component} from "@tarojs/taro"
import {View} from "@tarojs/components"
import Util from "../../util/util"
import api from "../../config/api"
import { observer, inject } from "@tarojs/mobx";
import Navbar from "../../components/navbar/navbar"
import Banner from "../../components/banner/banner"
import {Height as HeightComp}  from '../../components/height/height'
import './height.less'


@inject("formStore")
@observer
class Height extends Component {

    state = {
        _height: 0,
        statusBarHeight: 0,
        svHeight:0
    }

    componentWillMount() {

        Util.getNavInfo()
            .then(res => {
                this.setState({ _height: res.height, statusBarHeight: res.statusBarHeight});
            });

    }
    componentDidMount(){

        this.getScrollViewHeight()

    }

    getScrollViewHeight() { // 设置ScrollView的高度

        Taro.getSystemInfo().then(res => {

            const query = Taro.createSelectorQuery()

            query.select('#content').boundingClientRect()

            query.exec((res) => {
                const c = res[0].height
                this.setState({
                    svHeight: c
                })
            })

        })
    }

    setHeight(n){

       
        const { formStore } = this.props

        formStore.setHeight(n)

        setTimeout(() => {
            Taro.navigateTo({
                url:'/pages/education/education'
            })
        }, 300);
        
    }

    render() {

        const { formStore: { height } } = this.props
        return <View
            className="container"
            style={{
                paddingTop: this.state._height + "px"
        }}>
            <Navbar
                height={this.state._height}
                statusBarHeight={this.state.statusBarHeight}
                size="28"
                color="#ffffff"
                icon="chevron-left"
                title="完善资料"/>
            <Banner title="您的身高？" style="width:100%"/>
            <View id="content" className="content">
                <ScrollView scrollY={true} style={'height:' + this.state.svHeight + 'px'} >
                    <HeightComp height_value={height} onChoose={this.setHeight}></HeightComp>
                </ScrollView>
                
            </View>
        </View>
    }

}
export default Height

代码就不解释了，和前面教程里提到的代码含义一样。
搜索微信公众号：老夫撸代码 回复数字 1007 获取完整教程以及代码仓库地址

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

老夫撸代码

---

版权声明：未经授权，不得转载