weex 实现仿ios 三级联动地址选择器

这里要实现一个weex 的 一个自定义的三级联动组件，这里啰嗦一句为什么使用 vue 去自定义，一般使用weex的情况下，native也是支持原生扩展的，而且相对 android 和ios 各种第三方的组件选择很多不少还很成熟，为什么不直接使用呢。

这里我使用weex的原则是能够使用vue解决的问题一定不抛给native，原因如下，第一，使用vue 写的ui能够更好的保证android ios 的界面的统一性。第二，维护修改只需要维护一个地方，成本相对低很多，我们可能会遇到过这样的情况，今天说好了我们是颜色是xxx等等，还没有到下午，产品就要求换成另一个颜色，或者大小，如果是两份 native的，就需要修改两个地方了，相对就会麻烦很多，尤其是遇到更大的变动的时候，所以原则上，不到万不得已，不适用native 的自定义组件

好了，下面说一下这个组件的实现，基于很多前端入手或者刚刚入门的同学基础比较薄弱，所以会从最基础的一步一步说明

第一： 数据，数据本来呢一般都是从服务器获取的省市区信息（为什么从服务器去拿，因为这个地址一般是作为收货地址等等的，服务器需要做一些绑定等等的操作），这边我们主要写的是组件，所以数据就使用本地数据了

稍微解释一下数据 ，省份列表就是一个 Array，里面放了所有省份信息
城市数据则是一个map，每一个省会对应n个市 通过省份的 recordid 去获得的 value value则是一个市的 Array，区也是一样，是一个map，拿市的id可以获取到市下面的所有的区信息

第二：UI
控件的ui，当显示这个控件的时候有一层遮罩，遮罩上层显示有三个并排的list 对应省市区的list，选择完成之后点击确定，获取到选择的结果

<template>  <div class="stories-view" append="tree" :style="{height:`${totalheight}px`}">      <div class="list-mask" :style="{height:`${totalheight-80}px`}"  @click="unselectedaddress"></div>      <text class="addbutton basebutton" @click="selectedaddress" >确定</text>          <div class="select-item"  >        <list class="listitem">          <cell v-for="(item, index) in proviceList" append="tree" @click="selectprovince(index)">            <text class="cityitem" :style="{color:(index === selectindex)?'#00BBE4':'gray'}"> {{item.name}} </text>          </cell>        </list>            <list class="listitem">          <cell v-for="(item ,index) in cityList" append="tree" @click="selectcity(index)">            <text class="cityitem" :style="{color:(index === selectcityindex)?'#00BBE4':'gray'}"> {{item.name}} </text>          </cell>        </list>        <list class="listitem">          <cell v-for="(item, index) in disList" append="tree" @click="selectdist(index)">            <text class="cityitem" :style="{color:(index === selectdisindex)?'#00BBE4':'gray'}"> {{item.name}} </text>          </cell>        </list>    </div>  </div></template><style>  .stories-view {    min-height:250px;    overflow-y:auto;  }  .list-mask{    position: absolute;    top: 0;    left: 0;    width: 750px;    z-index: 10;    background-color: black;    opacity: 0.65;  }  .select-item{    flex-direction: row;    flex-wrap: nowrap;        position: absolute;        background-color: white;    align-items: center;    justify-content: center center;    bottom: 80px;    height: 600px;    width: 750px;    z-index:101;    opacity: 1;  }     .listitem{     max-height: 500px;     margin-top: 20px;     margin-bottom: 20px;     width: 250px;     max-height: 500px;     flex-grow:1;     }   .cityitem{    color: gray;    text-align: center;    padding-top: 10px;    padding-bottom: 10px;    font-size: 32px;  }    .addbutton{    bottom: 0px;    width:750px;    padding-top: 18px;        text-align: center;       }    .basebutton{    color:white;    background-color: #00BBE4;     position: absolute;    font-size:32px;     height:80px;  }  </style><script>  export default {     props: {      proviceList: {        type: Array,        required: true      },      cityListMap: {        type: Object,        required: true      },      disListMap: {        type: Object,        required: true      }    },        data() {      return{        selectindex:0,        selectcityindex:0,        selectdisindex:0,        cityList:[],//当前市列表        disList:[],  // 当前区列表        selectedprovince:{},        selectedcity:{},        selecteddist:{},      }    },    methods: {      selectedaddress(){        //  this.isselectaddress = false  //关闭选择框                    this.selectplace =  proviceList[this.selectindex].name+'  '+ this.cityList[this.selectcityindex].name +'  ' + this.disList[this.selectdisindex].name               this.$emit('haveselectedaddress',this.selectplace);                        },      unselectedaddress(){         this.$emit('haveselectedaddress','');                        },            selectprovince(index){        this.selectedprovince = this.proviceList[index]        //显示 市和区        this.cityList = this.cityListMap[this.proviceList[index].recordId]         this.disList = this.disListMap[this.cityList[0].recordId]           this.selectindex = index;           },      selectcity(index){        this.selectedcity = this.cityList[index]        //显示区        this.disList = this.disListMap[this.cityList[index].recordId]           this.selectcityindex = index             },      selectdist(index){        this.selecteddist = this.disList[index]        this.selectdisindex = index      }       },    computed: {      totalheight(){        const height = 750/weex.config.env.deviceWidth*weex.config.env.deviceHeight         console.error('height:'+height)        return height      }    },    created(){      this.cityList = cityListMap[proviceList[this.selectindex].recordId]      this.disList = disListMap[this.cityList[this.selectcityindex].recordId]    }  }</script>

上面是这个 控件的代码了，vue写的少，格式不好莫要贱笑

第三：使用

<template>  <div >    <text class="title" @click="update" >{{date}}</text>      <selectvue class="list-mask" v-if="isselectaddress" :proviceList="proviceList" :cityListMap="cityListMap" :disListMap="disListMap"  @haveselectedaddress="selectedaddress"></selectvue>  </div></template><style>  .title { font-size: 48px; }  .list-mask{    position: absolute;    top: 0;    left: 0;    width: 750px;    z-index: 10;    background-color: black;    opacity: 0.65;  }  </style><script>  import selectvue from './compent/select_address.vue'  export default {    components:{selectvue},    methods: {      update(e) {        this.isselectaddress = true      },      selectedaddress(evtValue){        this.isselectaddress = false        if(evtValue === ''){          return        }        this.date = evtValue          }    },    data(){      return{        proviceList:[],        cityListMap:{},        disListMap:{},        isselectaddress: false,        date:'点击选择地址'      }    },    mounted(){      this.proviceList = global.proviceList      this.cityListMap = global.cityListMap      this.disListMap = global.disListMap                }  }</script>

这里是使用这个组件，有一点很重要，组件的位置 position: absolute;
一定要是absolute
剩下的就是 v-if 控制一下显示了

tips
为了在playground 上面显示，组件的高度需要减掉 180

  <div class="stories-view" append="tree" :style="{height:`${totalheight-180}px`}">

因为高度是有一个标题栏是原生的，需要把设备的高度减去原生这部分的高度，否则显示会不全，放到项目里面使用就没有问题了

组件的几个小知识点
一个是传值，通过 props

    props: {      proviceList: {        type: Array,        required: true      },      cityListMap: {        type: Object,        required: true      },      disListMap: {        type: Object,        required: true      }    },   

当然这个可以用一个object，自己去优化啦
传值的时候参考引用的界面

然后就是组件给页面返回值，点击确定之后，需要把获取到的省市区信息返回给页面来显示，这里有一个 $emit 提交，然后在父vue里面监听得到一下

      <selectvue class="list-mask" v-if="isselectaddress" :proviceList="proviceList" :cityListMap="cityListMap" :disListMap="disListMap"  @haveselectedaddress="selectedaddress"></selectvue>

selectedaddress 方法实现

      selectedaddress(evtValue){        this.isselectaddress = false        if(evtValue === ''){          return        }        this.date = evtValue          }

好了，到这里就已经完成这个简单组件了

资源下载地址