跟我一起做一个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 ...

随机推荐

Berlin Programming Contest 2004 Heavy Transportation /// dijkstra oj22604
题目大意: 输入t:t为样例数每个样例输入n,m:n 为顶点个数 m 为路径数接下来m行每行输入 u v w :从 u 点到 v 点的路承重为 w 输出车子若想通过 1~n的最短路车重需限 ...
springcloud系列12 config的使用
config组件分为server端和client端 config的原理: 就是当我们将配置文件放置在git上面,那么configserver就会去拉取相关配置文件至本地: 可以看到我本地是拉去了配置文 ...
T2963 贪吃蛇【BFS，四进制状压，A*】
Online Judge:未知 Label:BFS,四进制状压,暴力,A*,哈希,玄学. 题目描述给定一个n*m的地图和蛇的初始位置,地图中有些位置有石头,蛇不能经过.当然蛇也不能爬到地图之外. 每 ...
SPOJ - LOCKER
SPOJ - LOCKERhttps://vjudge.net/problem/45908/origin暴力枚举2-102 23 34 2 25 2 36 3 37 2 2 38 2 3 39 3 3 ...
leetcode146周赛-1131-绝对值表达式的最大值
题目描述: class Solution: def maxAbsValExpr(self, arr1, arr2) -> int: def function(s1,s2): result1=[] ...
廖雪峰Java11多线程编程-2线程同步-4wait和notify
wait和notify synchronized解决了多线程竞争的问题我们可以在synchronized块中安全的对一个变量进行修改,但是它没有解决多线程协调的问题. 例如设计一个TaskQueue ...
用React实现一个自动生成文章目录的组件
原文地址:小寒的博客功能介绍这个组件的效果呐,就是你在浏览这个页面的时候点击右上角的叉叉看到的那个文章目录. 功能很简单,就是根据文章内容自动生成这个目录,可以快速跳转. 需要的知识点正则 do ...
SpringBoot 05_集成SpringDataJpa
你还在为项目的集成头疼吗?你还在为管理大量的配置文件烦恼吗?如果是,用SpringBoot吧!今天主要介绍如果在SpringBoot的基础上创建一个集成了SpringDataJpa的项目,至于Spri ...
Maven实战08_仓库
何为Maven仓库在Maven世界中.任何一个依赖.插件或者项目构建的输出,都可以称之为构件.例如依赖log4j-1.2.15.jar是一个构件,差价maven-compile-plugin-2.0 ...
Mybatis和spingboot整合
0. 导包  <parent> <groupId>org.springframework.boot</g ...

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

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

随机推荐

热门专题