跟我一起做一個vue的小項目（八）

接下來我們進行的是城市選擇頁面的路由配置
添加city.vue,使其點擊城市，然后跳轉到city頁面

//router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'

Vue.use(Router)
// 導出一組路由配置項
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})

這里有個小知識，router-link會給div外層加一個a標簽

解決辦法，給其改變的部分添加字體顏色
接下來我們新建一個header.vue組件

//header.vue
<template>
    <div class="header">
        城市選擇
    </div>
</template>
<script>
export default {
  name: 'CityHeader'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header
    height :.86rem
    line-height:.86rem
    overflow:hidden
    text-align:center
    color:#fff
    background:$bgColor
</style>

將header組件注冊到City組件中，我們可以看到頁面為

//city.vue
<template>
<div>
<city-header></city-header>
</div>
</template>
<script>
import CityHeader from './components/Header'
export default {
  name: 'City',
  components: {
    CityHeader: CityHeader
  }
}
</script>
<style lang="stylus" scoped>

</style>

給header再添加一個返回的圖標，點擊並且返回home頁面，對一些公共的東西，我們就提取樣式出來放在varibles.styl中

//header.vue
<template>
    <div class="header">
        城市選擇
       <router-link to="/">
           <div class="iconfont header-back">&#xe624;</div>
       </router-link>
    </div>
</template>
<script>
export default {
  name: 'CityHeader'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header
    height :$headerHeight
    line-height:$headerHeight
    overflow:hidden
    text-align:center
    color:#fff
    background:$bgColor
    font-size:.32rem
    position:relative
    .header-back
        width:.64rem
        text-align:center
        font-size:.4rem
        position:absolute
        top:0
        left:0
        color:#fff
</style>

我們同理做一個搜索組件

//src\pages\city\components\Search.vue
<template>
    <div class="search">
        <input type="text" class="search-input" placeholder="請輸入城市名或拼音">
    </div>
</template>
<script>
export default {
  name: 'CitySearch'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.search
    height:.72rem
    background:$bgColor
    padding:0 .1rem
    .search-input
        box-sizing:border-box
        height:.62rem
        width:100%
        line-height:.62rem
        text-align:center
        border-radius:.06rem
        color:#666
</style>

我們接下來進行城市選擇頁面的列表布局部分

//List.vue
<template>
    <div class="list">
        <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">
                    <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">
                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 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 class="area">
            <div class="title border-topbottom">
                B
            </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 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 class="area">
            <div class="title border-topbottom">
                C
            </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 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>
</template>
<script>
export default {
  name: 'CityList'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.border-topbottom
    &:before
        border-color:#ccc
    &:after
        border-color:#ccc
.list
    overflow:hidden
    position:absolute
    top:1.58rem
    left:0
    right:0
    bottom:0
    .title
        line-height:.44rem
        background:#eee
        padding-left:.2rem
        color:#666
        font-size:.26rem
    .button-list
        padding:.1rem .6rem .1rem .1rem
        overflow:hidden
        .button-wrapper
            width:33.33%
            float:left
            .button
                margin:.1rem
                text-align:center
                border:.02rem solid #ccc
                border-radius:.06rem
                padding:.1rem 0
    .item-list
        .item
            line-height:.76rem
            color:#666
            padding-left:.2rem
</style>

現在整個頁面的效果為

但是我們會發現中間部分是不能滑動的，我們使用Better-scroll解決這個問題

npm install better-scroll --save

在代碼中正確使用這個插件

我們可以看到現在頁面可以上拉下拉了

接下來我們將字母部分封裝成一個組件

//Alphabet.vue
<template>
   <ul class="list">
       <li class="item">A</li>
       <li class="item">B</li>
       <li class="item">C</li>
       <li class="item">D</li>
       <li class="item">E</li>
       <li class="item">F</li>
       <li class="item">G</li>
   </ul>
</template>
<script>
export default {
  name: 'CityAlphabet'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.list
    display:flex
    flex-direction:column
    justify-content:center
    top:1.58rem
    right:0
    bottom:0
    width:.4rem
    position:absolute
    .item
        text-align:center
        line-height:.4rem
        text-align:center
        color:$bgColor
</style>

現在我們的頁面效果如下

今日晚些我們會將城市列表頁面，進行數據渲染
晚些見