当我们处理兄弟组件时,可以让一个组件的数据给父组件,然后让父组件的这个数据传递给另一个组件
设置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>