接下来我们进行的是城市选择页面的路由配置

添加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"></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>

现在我们的页面效果如下



今日晚些我们会将城市列表页面，进行数据渲染

晚些见

跟我一起做一个vue的小项目（八）的更多相关文章

  1. 跟我一起做一个vue的小项目（二）

    这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...

  2. 跟我一起做一个vue的小项目（七）

    先看下我们所做项目的效果 这些数据都是我们在data中定义的,不是从后端数据中请求的.那么 接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相 ...

  3. 跟我一起做一个vue的小项目（五）

    接下来我们要做的是热门推荐页面,我们写一个推荐组件 使用的方法也是前端data中的数据渲染到页面上面,这里对文字过长取省略号的方法不成功使用了一个小技巧 使用了min-width:0 我们来看完整的代 ...

  4. 跟我一起做一个vue的小项目（APPvue2.5完结篇）

    先放一下这个完结项目的整体效果 下面跟我我一起进行下面项目的进行吧~~~ 接下来我们进行的是实现header的渐隐渐显效果,并且点击返回要回到首页 我们先看效果 在处理详情页向下移动过程中,heade ...

  5. 跟我一起做一个vue的小项目（四）

    接下来我们进行的是轮播页面下面的导航页的开发 我们需要的是实现轮播页下面的图标,并且实现轮播效果 这个话,其实基本思路先是渲染出小图标,然后,我们要对页数进行判断,如果图标的个数展示的就是8个,那个这 ...

  6. 跟我一起做一个vue的小项目（十一）

    接下来我们进行的是详情页动态路由及banner布局 先看页面的效果 下面是代码部分 <template> <div> <div class="banner&qu ...

  7. 跟我一起做一个vue的小项目（十）

    接下来我们对城市列表页面进行优化,除了对数据优化,也会进行节流处理 //src\pages\city\components\Alphabet.vue <template> <ul c ...

  8. 跟我一起做一个vue的小项目（三）

    接下来我们进行轮播的开发 安装插件,选用2.6.7的稳定版本 npm install vue-awesome-swiper@2.6.7 --save 根据其github上面的用法,我们在全局引用,在m ...

  9. 跟我一起做一个vue的小项目（九）

    接下来我们进行的就是城市列表页面数据额动态渲染. 也是在mock数据,进行动态渲染 //city.json { "ret": true, "data":{ &q ...

随机推荐

  1. 面试系列 31 zk都有哪些使用场景

    大致来说,zk的使用场景如下,我就举几个简单的,大家能说几个就好了: (1)分布式协调:这个其实是zk很经典的一个用法,简单来说,就好比,你A系统发送个请求到mq,然后B消息消费之后处理了.那A系统如 ...

  2. vue 图片懒加载v-lazy

    搬运自:https://blog.csdn.net/twodogya/article/details/80223331 vue v-lazy官方API:https://www.npmjs.com/pa ...

  3. Activiti常用类介绍

    为什么要使用工作流? 传统的设计在流程发生变化时的弊端: 1. 流程相关的属性和业务对象的属性,都放到了业务对象中. 2. 流程相关的逻辑和业务逻辑,都放到的业务逻辑中 常用类 ProcessEngi ...

  4. (转)行为树（Behavior Tree）实践（1）– 基本概念

    通过一个例子来介绍一下行为树的基本概念,会比较容易理解,看下图: 这是我们为一个士兵定义的一颗行为树(可以先不管这些绿圈和红圈是干吗的),首先,可以看到这是一个树形结构的图,有根节点,有分支,而且子节 ...

  5. Python全栈开发：css引入方式

    css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...

  6. 深入理解Java虚拟机（程序编译与代码优化）

    文章首发于微信公众号:BaronTalk,欢迎关注! 对于性能和效率的追求一直是程序开发中永恒不变的宗旨,除了我们自己在编码过程中要充分考虑代码的性能和效率,虚拟机在编译阶段也会对代码进行优化.本文就 ...

  7. 关于join的一些补充

    1, 为什么join是string的method而不是list的method http://effbot.org/pyfaq/why-is-join-a-string-method-instead-o ...

  8. HashMap数据结构

    2.1 HashMap 2.1.1 HashMap介绍 先看看HashMap类头部的源码: public class HashMap<K,V> extends AbstractMap< ...

  9. PHP如何打造一个高可用高性能的网站呢？

    https://blog.csdn.net/jwq101666/article/details/80162245 1. 说到高可用的话要提一下redis,用过的都知道redis是一个具备数据库特征的n ...

  10. JS里面function和Function的区别

    js里Function 与 function的不一样的,不仅仅是大小写的问题. 简单点说:大写的Function是一个类 ,而小写的function是一个对象. Function是一个构造器,func ...