Article Directory
Code Cloud creates city-ajax branch
Enter the command line
git pull
git checkout city-ajax
npm run dev
Add local simulation interface city.json
City.vue
Introduce Axios first
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>
Encountered a bug, the list does not scroll
Baidu took a look and found that the reason the list did not scroll was because when the better-scroll plug-in was loaded, the dom had not been loaded yet, so scrolling was impossible;
the mounted周期函数change was updatedcompleted.
Also need to pay attention! ! ! ! When the better-scroll plug-in is used, the DOM hierarchical relationship in html cannot have multiple divs of the same level, and the structure given by the official document should be 
checked by F12 to successfully add scroll-related styles.
Alphabet.view
<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>
Page effect
