欢迎关注微信公众号 老夫撸代码
前面我们讲到 使用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以下身高人群的选项。
身高组件
新建如下文件：
src/components/height/height.jssrc/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
代码解析：
-
getlist传入生成身高的开始值和步长，比如150，9 -
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.
身高页
新建如下文件：
src/pages/height/height.jssrc/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 获取完整教程以及代码仓库地址
关注微信公众号：老夫撸代码
老夫撸代码
版权声明：未经授权，不得转载
网友评论