【vue】三、vue2仿去哪儿app——城市列表页面

三、vue2仿去哪儿app——城市列表页面

Ⅰ 页面结构

城市列表页面

• 搜索框
• 热门城市
• 城市列表
• 右侧字母表导航

Ⅱ 开发笔记及注意点

1.使用Better-scroll第三方包实现拖动

npm install better-scroll --save

引入better-scroll：import Bscroll from 'better-scroll'

使用vue中的ref属性来获取DOM元素。
在List.vue中，总组件需要有一个div包裹住其他的组件，并且在这个div上加上ref属性：

<div class="list" ref="wrapper">

使用mounted()函数，在页面DOM挂载完毕的时候，创建better-scroll实例属性，并将wrapper传进去：

mounted () {this.scroll = new Bscroll(this.$refs.wrapper, {click: true})}

注意：在使用better-scroll时，会使click事件失效
原因：better-scroll 默认会阻止浏览器的原生 click 事件。
因此，需要我们在创建实例属性时，将click属性设置为true。

2.1. 使用router-link实现页面的跳转

<router-link to='/city'>
//点击后跳转的控件
</router-link>

注意：加了这个组件之后，需要重新设置字体颜色，因为组件中包含一个链接，链接本身设置了字体颜色。

2.2 router点击后变色问题

因为router-link也有超链接样式，点击之后会变色，所以要给这一层的盒子加一个固定的颜色color。否则点击过后颜色就改变了

3.实现点击字母表某个字母，跳转到相应字母的城市列表项（兄弟组件间联动）

首先，要实现兄弟组件间的传值，则可以采取以下方法：
（1）首先，将Alphabet.vue的letter值传递给父组件City.vue；
（2）接着，父组件接收子组件Alphabet.vue传递过来的值，并将该值传递给子组件List.vue

在Alphabet.vue中，绑定click事件函数，在事件函数中，使用$e在这里插入代码片mit()函数触发父组件自定义事件，并将letter值传过去：
（1）div上：@click="handleLetterClick"
（2）事件函数：

handleLetterClick (e) {this.$emit('change', e.target.innerText)},

父组件City.vue中，在data中定义letter属性，并设值为空，在change事件所绑定的函数中，接收letter值，并设置为自定义的letter值，最后将自定义的letter值传递给子组件List.vue：
（1）change事件绑定函数：

<city-alphabet :cities='cities' @change="handleLetterChange"></city-alphabet>

（2）data中定义letter值：

data () {return {letter: ''}},

（3）事件函数：

handleLetterChange (letter) {this.letter = letter}

（4）将自定义的letter值传递给子组件List.vue：

<city-list :hot='hotCities' :cities='cities' :letter="letter"></city-list>

子组件List.vue中，接收父组件传来的letter值，借助监听器，当letter值改变时，调用better-scroll提供的接口：scrollToElement()：让better-scroll自动滚到某个元素上。
（1）在props接收父组件的值：

props: {letter: String},

（2）借助监听器，监听letter值的改变：只要letter发生变化，就会执行该函数。
首先，在列表区域通过ref属性获取相应字母列表DOM元素：

<div class="area" v-for="(item,key) of cities" :key="key" :ref="key">

接着，在watch监听器中，获取当前字母的城市列表，

调用better-scroll提供的接口：scrollToElement()：让better-scroll自动滚到字母对应的城市列表上：

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

4.在左侧字母表中做上下拖拽的时候，城市列表内容也跟着变化

主要是监听拖拽时间，在li增加了三个事件，分别是touchstart、touchmove、touchend来监听拖拽事件，同时在li上使用ref，在data定义了一个touchStatus来保存是否在拖拽的状态，并使用计算属性把cities中的字母取出来放在数组letters中，最后计算拖拽到哪个字母：

    handleTouchStart () {this.touchStatus = true},handleTouchMove (e) {if(this.touchStatus){const startY = this.$refs['A'][0].offsetTopconst touchY = e.touches[0].clientY -79const index = Math.floor((touchY-startY) / 20)if(index >= 0 && index < this.letters.length) {this.$emit('change',this.letters[index])}}},handleTouchEnd () {this.touchStatus = false}

Alphabet.vue：

<template><ul class="list"><li class="item" v-for="item of letters" :key="item":ref="item"@touchstart="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd"@click="handleLetterClick">{{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].offsetTopconst touchY = e.touches[0].clientY -79const index = Math.floor((touchY-startY) / 20)if(index >= 0 && index < this.letters.length) {this.$emit('change',this.letters[index])}}},handleTouchEnd () {this.touchStatus = false}}
}
</script>
<style lang="stylus" scoped>@import '~styles/varibles.styl'.listdisplay flexflex-direction columnjustify-content centerposition absolutetop 1.58remright 0bottom 0width .4rem.itemline-height .4remtext-align centercolor $bgColor
</style>

5.Vuex的高级使用及localStorage

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {city: localStorage.city || '成都'},mutations: {changeCity (state, city) {state.city = citylocalStorage.city = city}}
})

上面实现的功能会有问题，就是每次重启应用的时候，选择的城市会重置为State中预设的城市名，为了解决这个问题，在这里就引入了h5中的localStorage本地缓存来实现

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)let defaultCity = '上海'
try {if (localStorage.city) {defaultCity = localStorage.city}
} catch (e) {}export default new Vuex.Store({state: {city: defaultCity},mutations: {changeCity (state, city) {state.city = citytry {localStorage.city = city} catch (e) {}}}
})

6.使用函数节流，限制move方法的频率

1. 首先，在data中定义timer=null
2. 在handleTouchMove ()方法中，当timer不为空时，清除timer；若为空，则定义定时器：

handleTouchMove (e) {if (this.touchStatus) {if (this.timer) {clearTimeout(this.timer)}this.timer = setTimeout(() => {const touchY = e.touches[0].clientY - 79const index = Math.floor((touchY - this.startY) / 20)if (index >= 0 && index < this.letters.length) {this.$emit('change', this.letters[index])}}, 10)}},

7.使用keep-alive优化网页性能

当前页面存在一个问题：每次路由切换，总会发送一次ajax请求（每次切换，页面总会重新渲染，mounted钩子重新执行，ajax数据就会重新获取）。
为了优化网页的性能，使用keep-alive：实现路由加载一次过后，会将加载内容放入内存之中。下一次进去，不需要重新渲染这个组件，mounted()函数也不再执行（即不再发送ajax请求），只需要从内存将内容取出显示

<keep-alive exclude="Detail"><router-view/>
</keep-alive>

在使用keep-alive之后，重新刷新页面时，mounted()函数都不会再次执行，导致如果改变城市后，首页其他数据没有相应的重新获取以及改变。

还有逻辑问题，就是在重新选择城市后在Home.vue中需要重新进行Ajax请求，

在Home.vue中引入vuex

import { mapState } from 'vuex'

修改getHomeinfo方法，在请求的时候带上state中的city

getHomeinfo () {axios.get('/api/index.json?city=' + this.city).then(this.getHomeinfoSucc)
},

activated () {if (this.lastCity !== this.city) {this.lastCity = this.citythis.getHomeInfo()}}