1. 在 router目錄下 的 index.js文件中，新增路由 import City from '@/pages/city/City' { path: '/city', name: 'City', component: City } 2. 在city 目錄下新建city文件夾，然後新建 Cit ...
1. 在 router目錄下 的 index.js文件中，新增路由
import City from '@/pages/city/City'
{
path: '/city',
name: 'City',
component: City
}
2. 在city 目錄下新建city文件夾，然後新建 City.vue
<template>
<div>
</div>
</template>
<script>
export default {
name: 'City',
components: {
}
}
</script>
<style lang="stylus" scoped>
</style>
3.在 首頁的城市選擇處，新增router-link 組件
<router-link to="/city">
<div class="header-right">
城市<span class="iconfont arrow-right"></span>
</div>
</router-link>
二，城市選擇
1. header部分 在components 文件中 新增 header.vue
<template>
<div class="header">
<div class="header-left">
<div class="iconfont back-icon"></div>
</div>
<div class="header-input">
<span class="iconfont"></span>輸入城市/景點/游玩主題
</div>
<router-link to="/city">
<div class="header-right">
城市<span class="iconfont arrow-right"></span>
</div>
</router-link>
</div>
</template>
<script>
export default {
name: 'HomeHeader'
}
</script>
<!--組件樣式，不影響其他組件-->
<!--1rem = html front-size = 50px-->
<style lang="stylus" scoped>
@import "~styles/varibles.styl"
.header
display flex
line-height:$headerHeight
background: $bgColor
color: #fff
.header-left
margin-left: 0.1rem
float:left
width :.64rem
.header-input
padding-left:.2rem
.back-icon
text-align center
font-size .4rem
flex: 1
height: .64rem
line-height: .64rem
margin-top: .12rem
margin-left: .2rem
padding-left: .2rem
color: #ccc
background: #fff
border-radius: .1rem
.header-right
.arrow-right
font-size .3rem
margin-left -.05rem
min-width: 1.04rem
padding: 0 .1rem
float: right
text-align: center
color: #ffffff
</style>
2. 在components 中新增 Search.vue
<template>
<div class="search">
<input type="text" class="search-input" placeholder="輸入城市名或拼音">
</div>
</template>
<script>
export default {
name: 'CitySearch'
}
</script>
<!--組件樣式，不影響其他組件-->
<!--1rem = html front-size = 50px-->
<style lang="stylus" scoped>
@import "~styles/varibles.styl"
.search
height .72rem
padding 0 .1rem
background $bgColor
.search-input
padding 0 .1rem
box-sizing border-box
height .62rem
line-height .62rem
width 100%
text-align center
border-radius .06rem
</style>
目錄結構:
效果：
三，列表佈局
1. 在components 中新建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 class="button-wrapper">
<div class="button">北京</div>
</div>
<div class="button-wrapper">
<div class="button">北京</div>
</div>
<div class="button-wrapper">
<div class="button">北京</div>
</div>
<div class="button-wrapper">
<div class="button">北京</div>
</div>
<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">
<div class="button">北京</div>
</div>
<div class="button-wrapper">
<div class="button">北京</div>
</div>
<div class="button-wrapper">
<div class="button">北京</div>
</div>
<div class="button-wrapper">
<div class="button">北京</div>
</div>
<div class="button-wrapper">
<div class="button">北京</div>
</div>
</div>
</div>
<div class="area">
<div class="title border-topbottom">A</div>
<div class="item-list">
<div class="item border-bottom">阿裡爾</div>
<div class="item border-bottom">阿裡爾</div>
<div class="item border-bottom">阿裡爾</div>
<div class="item border-bottom">阿裡爾</div>
<div class="item border-bottom">阿裡爾</div>
</div>
</div>
</div>
</div>
</template>
樣式：
@import "~styles/varibles.styl"
.border-topbottom
&:before
border-color #ccc
&:after
border-color #ccc
.border-bottom
&:before
border-color #ccc
.list
overflow hidden
position absolute
top 1.58rem
right 0
bottom 0
left 0
.title
line-height .54rem
padding-left .2rem
background #eee
color #666
font-size .26rem
.button-list
padding .1rem .6rem .1rem .1rem
overflow hidden
.button-wrapper
float left
padding .1rem
.button
text-align center
margin .1rem
border .02rem solid #ccc
border-radius .06rem
padding .1rem .5rem
.item-list
.item
line-height .76rem
padding-left .2rem
2. 使用better-scroll 聯級滾動
GIt地址 ：https://github.com/ustbhuangyi/better-scroll
安裝： npm install better-scroll
使用：
CityList.vue
<div class="list" ref="wrapper">
<div>
......
</div>
<div>
import BScroll from 'better-scroll'
export default {
name: 'CityList',
mounted: function () {
//this.$refs.wrapper獲取dom元素
this.scroll = new BScroll(this.$refs.wrapper)
}
}
3. 右側字母表
新建 Alphabet.vue
<template> <div> <ul class="list"> <li class="item">A</li> <li class="item">A</li> <li class="item">A</li> <li class="item">A</li> <li class="item">A</li> <li class="item">A</li> <li class="item">A</li> </ul> </div> </template> <script> export default { name: 'CityAlphabet' } </script> <style lang="stylus" scoped> @import "~styles/varibles.styl" .list position absolute right 0 top 1.58rem bottom 0 display flex width .4rem flex-direction column justify-content center .item text-align center line-height .4rem color $bgColor </style>View Code
目前效果：
4. 動態數據渲染
在static 目錄下新建moc 文件夾，添加city.json文件
地址：https://github.com/1417766861/Vue2.5-App/blob/master/Travel/static/moc/city.json
發送ajax 請求：
import ApiUrl from '@/config/api_url'
......
data () { return { cities: {}, hotCities: [] } }, methods: { getCityInfo () { axios.get(ApiUrl.api + 'city.json') .then(this.handleGetCityInfoSucc) }, handleGetCityInfoSucc (res) { res = res.data if (res.ret && res.data) { this.cities = res.data.cities this.hotCities = res.data.hotCities } } }, mounted () { this.getCityInfo() }
/src/config/api_url.js
export default { api: '/static/moc/' }
給組件添加數據：
<city-list :cities="cities" :hotcities="hotCities"></city-list> <city-alphabet :cities="cities"></city-alphabet>
遍歷顯示，List.vue
<div class="area"> <div class="title border-topbottom">熱門城市</div> <div class="button-list"> <div class="button-wrapper" v-for="city in hotcities" :key="city.id"> <div class="button">{{city.name}}</div> </div> </div> </div> <div class="area" v-for="(city,key) in cities" :key="key"> <div class="title border-topbottom">{{key}}</div> <div class="item-list"> <div class="item border-bottom" v-for="c in city" :key="c.id">{{c.name}}</div> </div> </div>
遍歷顯示，Alphabet.vue
<ul class="list"> <li class="item" v-for="(item,key) in cities" :key="key">{{key}}</li> </ul>
效果：
代碼地址：https://github.com/1417766861/Vue2.5-App
