自定义组件之三级联动

 小程序的联动已经出了来，但是还是想手动写个，说干就干

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
}

这样一个地区三级联动就完成。