記事のディレクトリ
CodeCloudが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>
バグが発生し、リストがスクロールしない
Baiduは見ていたし、より良い-スクロールプラグインがロードされたときので、それがスクロールすることができませんでしたので、理由がリストのスクロール、DOMは、まだロードされていないしていなかったことが判明し、変更がされた完成します。mounted周期函数updated
また、注意を払う必要があります！！！！better-scrollプラグインを使用する場合、htmlのDOM階層関係に同じレベルの複数のdivを含めることはできません。公式ドキュメントで指定された構造で
チェックする必要があります。F12チェック要素はスクロール関連のスタイルを正常に追加します。
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>
ページ効果
