怎么查看当前页面的页边距_去哪网开发实战记录（8）：城市选择页（上）

城市选择页需求展示

首先明确这是我们即将需要开发的城市选择页面：

城市选择页路由配置

在gitee的分支栏点击新建分支city-router，然后记得将本地master分支切换到city-router分支。如何切换呢？步骤如下：第一步：使用git pull将创建的city-router分支拉到本地；第二步：执行git checkout city-router切换到city-router分支；第三步：使用git status查看一下当前的分支状态：(出现这个说明分支切换成功)

$ git statusOn branch city-routerYour branch is up to date with 'origin/city-router'.nothing to commit, working tree clean

接下来开始城市选择页面路由的配置。打开src/router/index.js文件，往其中添加新的url路径：

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    }  ]})

接着去pages下面新建city文件夹，然后在city文件夹中新建一个City.vue文件，里面的代码如下：

city

我们是希望点击右上角的北京也就是城市区域，可以跳转至城市列表页：

那么需要在Header.vue中进行跳转链接的配置，而前面说过链接跳转使用标签结合to属性，则跳转链接区域代码修改为：

{{ city }}

to属性中的/city就是我们前面在router/index.js中配置的url链接。但是此时页面跳转区域会变为黑色：

那是因为会默认给元素添加一个颜色：color: #25a4bb;，此时你可以给这个.header-right属性增加color: #fff;使之变成白色就可以解决这个问题了，经过测试发现页面跳转测试通过。

城市选择页面开发

由于去哪网城市选择页面包含境内和境外且两者除了内容不同外，其余所有信息均相同，因此本篇笔记只介绍境内城市页面的开发。

在city文件夹中新建一个components文件，用于存放组件，对于city文件来说City.vue是整个city页面最外层的一个容器组件，里面肯定会嵌套其他的组件，因此把其他小组件都放在components文件中，然后在City.vue中进行引用即可，City.vue中的代码如下：

接着在src/pages/home/compontents文件夹中新建Header.vue文件里面的代码如下：

城市选择

注意一下以下代码片段：

其实就是点击左边的箭头页面跳转至首页：

注意到height: $headerHeight，这是因为对于行高和高度而言，我们发现多处地方都是.86rem，因此考虑将其提出单独成为一个变量，因此你可以在tyles/varibles.styl文件中新增：$headerHeight = .86rem即可。

注意考虑到效率的问题，现在可能是直接把完成后的整个代码粘贴出来，后期会根据情况进行细化介绍。

最后就是将我们的代码上传到city-router分支，并且将其与master分支进行合并，相应的步骤如下：

git statusgit add .git commit -m 'city router'git pushgit checkout mastergit merge city-routergit push

如此关于城市选择页路由配置就到此为止，后续是搜索框的布局。

搜索框布局

在gitee的分支栏点击新建分支city-search，然后记得将本地master分支切换到city-search分支。如何切换呢？步骤如下：第一步：使用git pull将创建的city-search分支拉到本地；第二步：执行git checkout city-search切换到city-search分支；第三步：使用git status查看一下当前的分支状态：(出现这个说明分支切换成功)

$ git statusOn branch city-searchYour branch is up to date with 'origin/city-search'.nothing to commit, working tree clean

接下来开始搜索框页面的配置。在city/components文件夹下面新建Search.vue，里面的初始代码为：

Search

4

接着去City.vue中引入这个组件：

...

接下来回到Search.vue文件开始修改样式：

之后的效果如图：

关于box-sizing请点击，或者去W3c上面查阅相关资料。

最后就是将我们的代码上传到city-search分支，并且将其与master分支进行合并，相应的步骤如下：

git statusgit add .git commit -m 'add search to city'git pushgit checkout mastergit merge city-searchgit push

如此关于城市搜索框的介绍完毕，后续是城市列表布局的开发。

城市列表页开发

在gitee的分支栏点击新建分支city-list，然后记得将本地master分支切换到city-list分支。在city/components文件夹下面新建List.vue，并在City.vue文件中进行引用。List.vue中的代码如下：

当前城市

北京

热门城市

北京

上海

广州

深圳

重庆

天津

A

阿拉尔

阿拉善盟

阿勒泰

安庆

安顺

A

阿拉尔

阿拉善盟

阿勒泰

安庆

安顺

A

阿拉尔

阿拉善盟

阿勒泰

安庆

安顺

A

阿拉尔

阿拉善盟

阿勒泰

安庆

安顺

这里面有几个注意点：第一个就是下面的代码：

.border-topbottom  &:before    border-color: #ccc

它用于复写border.css中的.border-topbottom的样式，其中的&:before是Css中的before选择器，:before选择器在被选元素的内容前面插入内容，请使用 content 属性来指定要插入的内容。举个例子，如在每个

元素的内容之前插入新内容：

p:before{ content:"hello,vuejs!：";}

其次就是list这个类用于固定标题，也就是说让List组件的顶部外边距腾出固定的位置用于显示Header和Search组件。仔细看现在的样子：

现在我们已经把Header和Search组件所占用的空间给让出来了，但是有一个问题就是红色区域是list类所能显示的范围，也就是说红色区域后面的都是显示不了的：

有人可能会问怎么显示不了，因为红色区域就是

所占用的区域背景：

.list  position: absolute  top: 1.58rem  left: 0  right: 0  bottom: 0  background: red

这样是不行的，我们需要滑动右侧的滚轮使城市列表详细显示出来，这就需要使用到后面介绍的BetterScroll了。

字母滚动条

在前面为了保证button撑起可以显示Header和Search组件的高度，我们给.list类添加了以下两行代码：

.list  overflow: hidden  position: absolute

这样就会使得页面无法滚动，想要实现可以滚动的效果可以借助于第三方插件better-scroll，先使用以下命令进行安装better-scroll：npm install better-scroll --save，然后阅读文档发现DOM结构应当类似如下结构：

... ... ...