小程序的联动已经出了来，但是还是想手动写个，说干就干
pickers.axml
{{province}}-{{city}}-{{county}}
取消
确定
{{item}}
{{item}}
{{item}}
pickers.js
Component({
data: {
provinces: [],
province: "",
citys: [],
city: "",
countys: [],
county: '',
value: [0, 0, 0],
values: [0, 0, 0],
cityData: "",
isShow: false
},
didMount() {
var that = this;
that.setData({
'cityData': this.props.value
});
var cityData = that.data.cityData;
const provinces = [];
const citys = [];
const countys = [];
for (let i = 0; i < cityData.length; i++) {
provinces.push(cityData[i].name);
}
console.log('省份完成');
for (let i = 0; i < cityData[0].sub.length; i++) {
citys.push(cityData[0].sub[i].name)
}
console.log('city完成');
for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
countys.push(cityData[0].sub[0].sub[i].name)
}
that.setData({
'provinces': provinces,
'citys': citys,
'countys': countys,
'province': cityData[0].name,
'city': cityData[0].sub[0].name,
'county': cityData[0].sub[0].sub[0].name
})
console.log('初始化完成');
},
methods: {
onChange(e) {
console.log(e)
let val = e.detail.value
let t = this.data.values;
let cityData = this.data.cityData;
if (val[0] != t[0]) {
console.log('province no ');
const citys = [];
const countys = [];
for (let i = 0; i < cityData[val[0]].sub.length; i++) {
citys.push(cityData[val[0]].sub[i].name)
}
for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
countys.push(cityData[val[0]].sub[0].sub[i].name)
}
this.setData({
province: this.data.provinces[val[0]],
city: cityData[val[0]].sub[0].name,
citys: citys,
county: cityData[val[0]].sub[0].sub[0].name,
countys: countys,
values: val,
value: [val[0], 0, 0]
})
return;
}
if (val[1] != t[1]) {
console.log('city no');
const countys = [];
for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
countys.push(cityData[val[0]].sub[val[1]].sub[i].name)
}
this.setData({
city: this.data.citys[val[1]],
county: cityData[val[0]].sub[val[1]].sub[0].name,
countys: countys,
values: val,
value: [val[0], val[1], 0]
})
return;
}
if (val[2] != t[2]) {
console.log('county no');
this.setData({
county: this.data.countys[val[2]],
values: val
})
return;
}
},
open() {
this.setData({
isShow: true
})
},
handleOk() {
let address=[this.data.province,this.data.city,this.data.county];
this.props.onChange(address)
this.setData({
isShow: false
})
},
handleNo() {
var that = this;
that.setData({
'cityData': this.props.value
});
var cityData = that.data.cityData;
console.log("onLoad", cityData);
const provinces = [];
const citys = [];
const countys = [];
for (let i = 0; i < cityData.length; i++) {
provinces.push(cityData[ i ].name);
}
console.log('省份完成');
for (let i = 0; i < cityData[0].sub.length; i++) {
citys.push(cityData[0].sub[ i ].name)
}
console.log('city完成');
for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
countys.push(cityData[0].sub[0].sub[i].name)
}
that.setData({
'provinces': provinces,
'citys': citys,
'countys': countys,
'province': cityData[0].name,
'city': cityData[0].sub[0].name,
'county': cityData[0].sub[0].sub[0].name,
isShow: false,
value: [0, 0, 0],
values: [0, 0, 0],
})
console.log('初始化完成');
let address=[this.data.province,this.data.city,this.data.county]
this.props.onChange(address)
}
}
});
pickers.acss
.input-box{
display: flex;
align-items: center;
height: 300rpx;
padding: 20rpx;
}
.input-box .input{
width: 100%;
height: 90rpx;
line-height: 90rpx;
font-size: 32rpx;
color: #646464;
padding: 0 10rpx;
border: 1px solid #000;
}
.city-picker-mask{
left: 0;
bottom:0;
position: fixed;
height: 10%;
width: 100%;
min-height: 100%;
background-color: rgba(0,0,0,.5);
z-index: 160;
}
.city-picker-mask .city-picker-inner{
position: absolute;
left: 0;
bottom:0;
background-color: #fff;
width: 100%;
}
.city-picker-inner .citybody {
width: 100%;
}
.city-picker-inner .city-header {
box-sizing: border-box;
width: 100%;
height: 30px;
line-height: 30px;
z-index: 4;
padding: 0 20rpx;
background-color: #fff;
}
.city-header .city-cancel {
float: left;
color: #818181;
}
.city-header .city-true {
float: right;
color: #2FB42E
}
.city-picker-inner .picker-column-item{
width: 100%;
color: #646464;
font-size: 28rpx;
}
.swiper-item{
height: 90px;
}
.bc_red{
background-color: red;
}
.bc_green{
background-color: green;
}
.bc_yellow{
background-color: yellow;
}
.font{
font-size: 40px;
font-family:"STHupo" !important;
}
picker.json
{
"component":true
}注意：由于[i]会被论坛过滤掉，我这里把会过滤掉的截图贴出来
注意总共是有九个[i]
这样组件就开发出来了，接下来就是使用了，下面以在index页面中使用为例
index.axml
index.js
import tcity from '/util/citys.js';
Page({
data: {
cityData:"",
},
onChange(val,code) {
console.log("com",val)
console.log("comcode",code)
},
onLoad() {
tcity.init(this);//这个是省市县的数据数据比较多就写在citys.js里了
},
});index.json
{
"usingComponents":{
"pickers":"/pages/test/test" //这里写上自己的路径
}
}顺便把citys的也贴出来
citys.js
let cityData= [
... //这里面就是省市县的数据 太多了，我就以附件形式传一下
]
function init(that){
that.setData( {
'cityData': cityData
});
}
module.exports={
init:init
}
这样一个地区三级联动就完成。
