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

1.城市选项

@芥末的糖-----选择城市的实现_第1张图片
城市选择

1.1热门城市实现思路

//热门城市点击
methods:{
  remen(){
    this.bscroll.scrollToElement(this.refs.remen)
  }
}
//对应的热门城市上海的ref属性
   
热门城市

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

  
------------------------------------------------------------
//对应的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
    }

你可能感兴趣的:(@芥末的糖-----选择城市的实现)