二.Vue2.5开发去哪儿网app城市列表页④——字母表点击或拖拽带动页面变换（兄弟组件间的联动）

本文链接：https://blog.csdn.net/Vansal/article/details/87905661

当我们处理兄弟组件时，可以让一个组件的数据给父组件，然后让父组件的这个数据传递给另一个组件

设置Alphabet子组件，当其一个字母被点击时向外触发一个change事件，并携带它的文本内容

<template>
  <ul class="list">
    <li class="item" v-for="(item, key) of cities" :key="key" @click="handleLetterClick">{{key}}</li>
  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    }
  }
}
</script>

父组件City绑定这个change事件，监听到这个事件后，触发handleLetterChange事件，并接收这个事件的参数，然后把这个参数以单向绑定的方式传递给子组件List

<template>
  <div>
    <city-header></city-header>
    <city-search></city-search>
    <city-list :hotCities="hotCities" :cities="cities" :letter="letter"></city-list>
    <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
  </div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
import axios from 'axios'
export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  data () {
    return {
      hotCities: [],
      cities: {},
      letter: ''
    }
  },
  methods: {
    getCityInfo () {
      axios.get('/api/city.json')
        .then(this.getCityInfoSuss)
    },
    getCityInfoSuss (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.hotCities = data.hotCities
        this.cities = data.cities
      }
    },
    handleLetterChange (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getCityInfo()
  }
}
</script>

子组件List使用props接收letter，然后使用watch方式监听letter，当letter改变时，使用better-scroll提供的方法滚动到标签为lettter的画面

理解：

this.scroll.scrollToElement(element)中element只能是一个元素标签

假如this.letter是'A'，ref绑定key值，所以$refs是一个包含了26个字母的对象，其中每个字母都是一个数组，每个数组里存放的是字母对应的元素标签

使用this.$refs[this.letter][0]取得A对象数组中的A元素标签，这样点击某个字母后就能跳转到其页面

<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" v-for="item of hotCities" :key="item.id">
            <div class="button">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="area" v-for="(items, key) of cities" :key="key" :ref="key">
        <div class="title border-topbottom">{{key}}</div>
        <ul class="item-list">
            <li class="item" v-for="item of items" :key="item.id">{{item.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  }
}
</script>

接下来就是上下拖动字母表也能使页面随之滚动

在Alphabet组件中循环元素绑定3个事件，在data中定义一个状态标识touchStatus，当开始按住时touchStatus=true，结束按住时=false，然后在计算属性中定义一个letters，用它来把cityes这个对象转换成数组，所以letters是26个字母组成的一个数组，ref绑定item，使$refs成为26个DOM对象的数组，在Move事件中求出A元素到绿色框的距离，还有手指按住时某元素到绿色框的距离，然后就可以取得手指滑动时字母的下标index，index等于两者相减后除以字母高度的值，然后向外发出一个change事件，携带这个字母就可以了

<template>
  <ul class="list">
    <li class="item" v-for="item of letters" :key="item" :ref="item" @click="handleLetterClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">{{item}}</li>
  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  data () {
    return {
      touchStatus: false
    }
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        const startY = this.$refs['A'][0].offsetTop
        const touchY = e.touches[0].clientY - 79
        const index = Math.floor((touchY - startY) / 20)
        if (index >= 0 && index < this.letters.length) {
          this.$emit('change', this.letters[index])
        }
      }
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>

现在已经达到效果了，但是我们的代码性能比较低，还要做一下优化

因为startY在handleTouchMove中每次都会重新计算，而它是一个固定值，所以我们可以这样优化

在data中定义startY，当页面初次渲染时，city父组件中初始化cities的值其实是一个空对象，此时Aphlabet子组件的cities也是一个空对象，也就是Aphlabet子组件中什么内容也不会显示出来，当city父组件通过AJAX获取数据后，cities的值才发生变化，Aphlabet才被渲染出来，当Aphlabet子组件中的数据发生变化时，Aphlabet就会重新渲染，重新渲染之后就会产生Aphlabet列表，这个时候updated生命周期钩子就会被执行，去获取A这个字母的DOM距上端的距离

第二步我们要做一个函数节流，限制一下handleTouchMove函数执行频率

<template>
  <ul class="list">
    <li class="item" v-for="item of letters" :key="item" :ref="item" @click="handleLetterClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">{{item}}</li>
  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  data () {
    return {
      touchStatus: false,
      startY: 0,
      timer: null
    }
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  },
  updated () {
    this.startY = this.$refs['A'][0].offsetTop
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        if (this.touchStatus) {
          const touchY = e.touches[0].clientY - 79
          const index = Math.floor((touchY - this.startY) / 20)
          if (index >= 0 && index < this.letters.length) {
            this.$emit('change', this.letters[index])
          }
        }
      }, 16)
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>