跟我一起做一个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"></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的小项目（八）的更多相关文章

跟我一起做一个vue的小项目（二）
这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...
跟我一起做一个vue的小项目（七）
先看下我们所做项目的效果这些数据都是我们在data中定义的,不是从后端数据中请求的.那么接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相 ...
跟我一起做一个vue的小项目（五）
接下来我们要做的是热门推荐页面,我们写一个推荐组件使用的方法也是前端data中的数据渲染到页面上面,这里对文字过长取省略号的方法不成功使用了一个小技巧使用了min-width:0 我们来看完整的代 ...
跟我一起做一个vue的小项目（APPvue2.5完结篇）
先放一下这个完结项目的整体效果下面跟我我一起进行下面项目的进行吧~~~ 接下来我们进行的是实现header的渐隐渐显效果,并且点击返回要回到首页我们先看效果在处理详情页向下移动过程中,heade ...
跟我一起做一个vue的小项目（四）
接下来我们进行的是轮播页面下面的导航页的开发我们需要的是实现轮播页下面的图标,并且实现轮播效果这个话,其实基本思路先是渲染出小图标,然后,我们要对页数进行判断,如果图标的个数展示的就是8个,那个这 ...
跟我一起做一个vue的小项目（十一）
接下来我们进行的是详情页动态路由及banner布局先看页面的效果下面是代码部分 <template> <div> <div class="banner&qu ...
跟我一起做一个vue的小项目（十）
接下来我们对城市列表页面进行优化,除了对数据优化,也会进行节流处理 //src\pages\city\components\Alphabet.vue <template> <ul c ...
跟我一起做一个vue的小项目（三）
接下来我们进行轮播的开发安装插件,选用2.6.7的稳定版本 npm install vue-awesome-swiper@2.6.7 --save 根据其github上面的用法,我们在全局引用,在m ...
跟我一起做一个vue的小项目（九）
接下来我们进行的就是城市列表页面数据额动态渲染. 也是在mock数据,进行动态渲染 //city.json { "ret": true, "data":{ &q ...

随机推荐

UASCO Cow Pedigrees /// oj10140
题目大意: 输入n,m :二叉树输出 n个点分为m层的方案数: 每个点的分支要么是0要么是2 Sample Input 5 3 Sample Output 2 即两个方案为 O ...
git使用中的问题
一.github ssh_exchange_identification: read: Connection reset by peer 和电脑环境有关,检查防火墙关了没有,是不是杀毒软件.安全卫士的 ...
我最恨ubuntu的自动升级内核功能
总是提示我boot分区空间不足, 怎么办, 删除原有不用的内核呗,手动来做. 1.查看当前使用内核版本号.输入 uname -a 查看.uname -a 2.删除旧内核. 切换root: su 输入命 ...
SQL数据表纵横转换
SELECT DISTINCT '(select b.risk from rhwl_easy_genes_new_risk b where b.genes_id=a.id and b.disease= ...
springboot导入excel到mysql
@Controller @RequestMapping(path = "/excel") public class ImportController { @Autowired pr ...
wiki方法能在H5页面上
1. wiki 方法能在h5网页上判断当前手机上是否安装了汽车之家app,有的话,打开软件,并且能跳到相应页面,没有安装的话,能跳到主软下载页面? Android有个 applink,但是不知道支持得 ...
github上创建java项目简单操作
github上创建java项目简单操作参考L: github上创建java项目简单操作 - CSDN博客http://blog.csdn.net/qq_29392425/article/detail ...
Git命令汇总（转）
转自:http://blog.csdn.net/esrichinacd/article/details/17645951 图片看不清请点击放大
[Ynoi2012]D1T1
题目套路的根号分治啊我们设置一个值\(S\) 对于\(S\leq x\)的操作,我们直接暴力修改,显然这样只会修改\(\frac{n}{S}\)次,所以我们需要一个能够\(O(1)\)修改的数据结 ...
mongodb什么时候使用
转自:https://blog.csdn.net/justlpf/article/details/80392944 简介 MongoDB[1] 是一个基于分布式文件存储的数据库.由C 语言编写.旨在为 ...

跟我一起做一个vue的小项目（八）

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

随机推荐

热门专题