码云创建city-ajax分支
输入命令行
git pull
git checkout city-ajax
npm run dev
加入本地模拟接口city.json
City.vue
先引入Axios
import axios from 'axios'
<template>
<div>
<city-header></city-header>
<city-search></city-search>
<city-list :hot="hotCities" :cities="cities"></city-list>
<city-alphabet :cities="cities"></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',
data () {
return {
cities: {
},
hotCities: []
}
},
components: {
CityHeader,
CitySearch,
CityList,
CityAlphabet
},
methods: {
getCityInfo () {
axios({
url: '/static/mock/city.json',
method: 'get'
}).then(this.handleGetCityInfoSucc)
},
handleGetCityInfoSucc (res) {
console.log(res)
if (res.data.ret && res.data.data) {
this.cities = res.data.data.cities
this.hotCities = res.data.data.hotCities
}
}
},
mounted () {
this.getCityInfo()
}
}
</script>
<style lang="scss" scoped></style>
List.vue
<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 in hot" :key="item.id">
<div class="button">{
{ item.name }}</div>
</div>
</div>
</div>
<div class="area" v-for="(item, key) in cities" :key="key">
<div class="title border-topbottom">{
{ key }}</div>
<div class="item-list">
<div
v-for="innerItem in item"
:key="innerItem.id"
class="item border-bottom"
>
{
{ innerItem.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'CityList',
props: {
hot: Array,
cities: Object
},
updated () {
this.scroll = new BScroll(this.$refs.wrapper)
},
}
</script>
<style lang="scss" scoped>
@import '~styles/varibles.scss';
// 1像素边框问题
.border-topbottom {
&::before {
border-color: #ccc;
}
&::after {
border-color: #ccc;
}
}
.border-bottom {
&::before {
border-color: #ccc;
}
}
.list {
overflow: hidden;
position: absolute;
top: 1.58rem;
left: 0;
right: 0;
bottom: 0;
.title {
padding: 0.1rem 0.2rem;
line-height: 0.44rem;
background: #eee;
}
.button-list {
overflow: hidden;
padding: 0.1rem 0.6rem 0.1rem 0.1rem;
.button-wrapper {
float: left;
width: 33.33%;
.button {
margin: 0.1rem;
padding: 0.14rem 0;
text-align: center;
border: 0.02rem solid #ccc;
border-radius: 0.1rem;
}
}
}
.item-list {
.item {
line-height: 0.76rem;
background: #fff;
padding-left: 0.2rem;
}
}
}
</style>
遇到bug，列表不滚动
百度了一下，发现列表不滚动的原因是因为加载better-scroll 这个插件的时候，dom还没有加载完成，所以造成了无法滚动；
把mounted周期函数改成updated就好了。
另外需要注意！！！！better-scroll插件在使用的时候html中DOM层级关系不能存在多个同级div，要和官方文档给的这种结构
F12检查元素成功添加滚动相关style
Alphabet.vue
<template>
<ul class="list">
<li class="item" v-for="(item, key) in cities" :key="key">{
{ key }}</li>
</ul>
</template>
<script>
export default {
name: 'Alphabet',
props: {
cities: Object
}
}
</script>
<style lang="scss" scoped>
@import '~styles/varibles.scss';
.list {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: 1.58rem;
right: 0;
bottom: 0;
width: 0.4rem;
.item {
text-align: center;
line-height: 0.4rem;
color: $bgColor;
}
}
</style>
页面效果
