Vue2.5从零开发猫眼⑦——City组件开发

Vue2.5从零开发猫眼系列以更新完毕

Vue2.5从零开发猫眼①——前言 

Vue2.5从零开发猫眼②——项目开始前准备

Vue2.5从零开发猫眼③——启动页开发

Vue2.5从零开发猫眼④——Home页开发

Vue2.5从零开发猫眼⑤——影院页开发

Vue2.5从零开发猫眼⑥——个人中心组件开发

Vue2.5从零开发猫眼⑦——City组件开发

Vue2.5从零开发猫眼⑧——引入store、LocalStorage和优化上线

City组件开发

• 获取数据

在static\mock目录创建city.json,由于数据太多这里就不粘贴，需要的话从项目源代码里面下载。

在src\api目录创建city.js

import axios from 'axios'

export function getCityList() {
    return axios.get('/api/city.json', {}).then((res) => {
        return Promise.resolve(res.data)
    })
}

• 在src目录创建pages\city\City.vue ```html

?> 因为City组件引用了List组件和Alphabet组件，我们分别创建此组件

## 创建List组件
```html

创建Alphabet组件

至此我们的城市页面已经完成，如下图 

逻辑开发

点击右侧的字符序列，左侧内容跟着切换，主要实现逻辑就是鼠标点下去获取当前的位置的下标，移动开发到结束这段的距离除以每个字符的高度，再加上开始移动的下标位置，就是移动到哪个位置，然后通过scrollToElement移动左侧的位置。

监听字符序列移动时间，纪录当前移动的位置，向父组件出发change事件

  methods: {
    onTouchStart(e) {
      this.touch.initiated = true
      let anchorIndex = e.target.getAttribute('data-index')
      let firstTouch = e.touches[0]
      this.touch.y1 = firstTouch.pageY
      this.currentIndex = anchorIndex;
      this.$emit('change', this.letters[this.currentIndex])
    },
    onTouchMove(e) {
      if (!this.touch.initiated) {
        return
      }
      let firstTouch = e.touches[0];
      this.touch.y2 = firstTouch.pageY;
      let delta = (this.touch.y2 - this.touch.y1) / 20 | 0;
      let index = parseInt(this.currentIndex) + delta;
      this.$emit('change', this.letters[index])
    },
    onTouchEnd(e) {
      this.touch.initiated = false
      this.$emit('end')   
    }
  }

父组件接受change组件，记录当前的letter,向List组件传递

change(letter) {
  this.letter = letter
}

List组件接动态监听letter,移动对应的位置

watch: {
    letter () {
      if (this.letter) {
        this.$refs.scroll.scrollToElement(this.$refs[this.letter][0])
      }
    }
}

List组件也可以显示当前的letter

  
{{letter}}
 

当移动结束后，Aplhabet向List触发end事件

onTouchEnd(e) {
  this.touch.initiated = false
  this.$emit('end')   
}

List接收end,移除letter

end() {
  setTimeout(() => {
    this.letter = ''
  }, 800);