自定義元件之三級關聯

 小程式的關聯已經出了來，但是還是想手動寫個，說幹就幹

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
}           

• 

這樣一個地區三級關聯就完成。