taro小程序地址选择组件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

效果图：

address_picker.tsx:

import Taro, { Component } from '@tarojs/taro'
import { View, PickerView, PickerViewColumn } from '@tarojs/components'
import PropTypes from 'prop-types'
import address from '../../utils/city.js'
import './address_picker.scss'class AddressPicker extends Component { state = {
value: [18, 11, 0],
provinces: address.provinces,
citys: address.citys[440000],
areas: address.areas[441400],
areaInfo: '',
} cityChange (e) {
const pickerValue = e.detail.value
const { provinces, citys, value } = this.state
const provinceNum = pickerValue[0]
const cityNum = pickerValue[1]
const countyNum = pickerValue[2]
// 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，
if (value[0] != provinceNum) {
const id = provinces[provinceNum].id
this.setState({
value: [provinceNum, 0, 0],
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id]
})
} else if (value[1] != cityNum) {
// 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据
const id = citys[cityNum].id
console.log(id)
this.setState({
value: [provinceNum, cityNum, 0],
areas: address.areas[citys[cityNum].id]
})
} else {
// 滑动选择了区
this.setState({
value: [provinceNum, cityNum, countyNum]
})
}
} // params true代表传递地址，false不传递
handlePickerShow (params: boolean) { if (params) {
console.log(this.props)
const { provinces, citys, areas, value, areaInfo } = this.state
// 将选择的城市信息显示到输入框
const tempAreaInfo = provinces[value[0]].name + '' + citys[value[1]].name + areas[value[2]].name
this.setState({
areaInfo: tempAreaInfo
}, () => {
this.props.onHandleToggleShow(this.state.areaInfo)
})
}
} render () {
const { provinces, citys, areas, value } = this.state
const { pickerShow } = this.props
return (
<View className={pickerShow? 'address-picker-container show': 'address-picker-container'} onClick={this.handlePickerShow.bind(this,true)}>
<View className="picker-content">
<View className="dialog-header">
<View className="dialog-button cancel" onClick={this.handlePickerShow.bind(this,false)}>取消</View>
<View className="dialog-title">请选择省市区</View>
<View className="dialog-button" onClick={this.handlePickerShow.bind(this, true)}>确定</View>
</View>
<PickerView onChange={this.cityChange} value={value} className='picker-view-wrap'>
<PickerViewColumn>
{
provinces.map((province, index) => {
return <View className="picker-item" key={index}>{province.name}</View>
})
}
</PickerViewColumn>
<PickerViewColumn>
{
citys.map((city, index) => {
return <View className="picker-item" key={index}>{city.name}</View>
})
}
</PickerViewColumn>
<PickerViewColumn>
{
areas.map((area, index) => {
return <View className="picker-item" key={index}>{area.name}</View>
})
}
</PickerViewColumn>
</PickerView>
</View>
</View>
)
}
}AddressPicker.propTypes = {
pickerShow: PropTypes.bool.isRequired,
onHandleToggleShow: PropTypes.func.isRequired,
}export default AddressPicker

样式文件：

.address-picker-container {
width: 100%;
height: 100vh;
display: flex;
z-index: 12;
background: rgba(0, 0, 0, 0.7);
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0px;
left: 0px;
visibility: hidden;
&.show {
visibility: visible;
.picker-content {
transform: translateY(0);
transition: all 0.4s ease;
}
}
}.picker-content {
position: absolute;
width: 100%;
bottom: 0;
background-color: #fff;
transform: translateY(150%);
transition: all 0.4s ease; .picker-view-wrap {
width: 100%;
height: 400px;
}
}.picker-item {
line-height: 70px;
font-size: 36px;
text-align: center;
}.dialog-header {
width: 100%;
background: #ededed;
display: flex;
justify-content: space-between;
align-items: center; .dialog-title {
color: #333;
} .dialog-button {
display: inline-block;
text-align: center;
font-size: 32px;
color: #E28E81;
padding: 30px;
&.cancel {
color: #666;
}
}
}