微信小程序自定义组件-城市选择

上篇文章有介绍一些小程序的自定义组件语法，这篇文章就不多做赘述，重点介绍组件的实现逻辑。

先把效果图贴出来，看看要实现的效果：

 

城市选择效果图.gif

首先还是设置布局，从实现效果看，组件可分成三个部分：展示城市数据的二级列表、侧边的滑动栏以及中间的提示框。也就是一个scroll-view，一个view布局以及一个text。最终确定的wxml布局文件如下：

<scroll-view class='cityList' scroll-y scroll-into-view='{
  {currentIndex}}' scroll-top='{
  {scrollTop}}'>
     <view wx:for='{
  {allCities}}'>
          <view class='letter-class' id="id{
  {index}}">{
  {item.letter}}</view>
          <view class='item-class' wx:for='{
  {item.cityList}}' wx:for-item='cityItem' bindtap='citySelectEvent' data