城市页面开发中的重难点
-
- 使用router-link实现页面的跳转
- 使用Better-scroll第三方包实现拖动
- 使用axios实现页面数据的动态渲染
- 实现点击字母表某个字母,跳转到相应字母的城市列表项(兄弟组件间联动)
- 实现拖拽字母表时,城市列表项跟着滚动
- 使用updated生命钩子存储startY的值
- 使用函数节流,限制move方法的频率
- 城市搜索功能的实现
- 使用Vuex实现城市列表页面与首页的数据共享,并且实现点击热门城市/城市列表/搜索城市列表事,相应的当前城市以及首页城市发生改变
- 使用Vue Router中的编程式导航,导航到不同的URL
- 使用LocalStorage实现本地存储
- 对Vuex代码进行优化,并使用其提供的API
- 使用keep-alive优化网页性能
使用router-link实现页面的跳转
<router-link to='/city'>
//点击后跳转的控件
</router-link>
注意:加了这个组件之后,需要重新设置字体颜色,因为组件中包含一个链接,链接本身设置了字体颜色。
使用Better-scroll第三方包实现拖动
- 首先,GitHub上搜索相关资源:better-scroll,了解相关内容。
- 安装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。
使用axios实现页面数据的动态渲染
通过axios来动态获取数据,做法与前一部分的首页开发一样,不再赘述。
实现点击字母表某个字母,跳转到相应字母的城市列表项(兄弟组件间联动)
- 首先,要实现兄弟组件间的传值,则可以采取以下方法:
(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