@芥末的糖-----选择城市的实现

1.城市选项

1.1热门城市实现思路

//热门城市点击
methods:{
  remen(){
    this.bscroll.scrollToElement(this.refs.remen)
  }
}
//对应的热门城市上海的ref属性
   <div ref="remen" class="city-title">
          热门城市
    </div>

1.2右侧点击事件对应左侧字母

  <div 
        class="nav-letter nav-item" 
        @click="gotoLetter(key)" 
        v-for="(item, key) of allCities" 
        :key="key"
        @touchstart = "handleTouchStart($event)"
        @touchmove = "handleTouchMove($event)"
        @touchend = "handleTouchEnd($event)"
      >
        {{ key }}
      </div>
------------------------------------------------------------
//对应的methods
  gotoLetter (key) {
      this.scrollToElement(this.$refs[key][0])
    },
    handleTouchStart (e) {
      this.touchStatus = true
    },
 //调用lodash的节流函数
    handleTouchMove: _.throttle( function(e) {
      if (this.touchStatus) {
        let index = Math.floor((e.touches[0].clientY - 120) / 18.67)
        let letters = Object.keys(this.allCities)
        let Alphabet = letters[index]
        if (index >= 0 && index < letters.length ) {
          this.scrollToElement(this.$refs[Alphabet][0])
        }
      }
    }, 100),

    handleTouchEnd() {
      this.touchStatus = false
    }