城市选择页需求展示
首先明确这是我们即将需要开发的城市选择页面:
![0dc44bef1d7fb5b50eed585e766a1314.png](https://i-blog.csdnimg.cn/blog_migrate/31c5ad9e2607c612ba3993bba5a16790.jpeg)
城市选择页路由配置
在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
我们是希望点击右上角的北京也就是城市区域,可以跳转至城市列表页:
![a2793880dcd1b2cbf5c2cdec5798d7ae.png](https://i-blog.csdnimg.cn/blog_migrate/cd9643203a5721bcea8ae8afde1a1281.jpeg)
那么需要在Header.vue中进行跳转链接的配置,而前面说过链接跳转使用标签结合to属性,则跳转链接区域代码修改为:
{{ city }}
to属性中的/city就是我们前面在router/index.js中配置的url链接。但是此时页面跳转区域会变为黑色:
![2d7583a3bdb7ac4679272210f0166c1f.png](https://i-blog.csdnimg.cn/blog_migrate/01203d2dfa149bb7c3ee3fe89042100e.jpeg)
那是因为会默认给元素添加一个颜色:color: #25a4bb;,此时你可以给这个.header-right属性增加color: #fff;使之变成白色就可以解决这个问题了,经过测试发现页面跳转测试通过。
城市选择页面开发
由于去哪网城市选择页面包含境内和境外且两者除了内容不同外,其余所有信息均相同,因此本篇笔记只介绍境内城市页面的开发。
在city文件夹中新建一个components文件,用于存放组件,对于city文件来说City.vue是整个city页面最外层的一个容器组件,里面肯定会嵌套其他的组件,因此把其他小组件都放在components文件中,然后在City.vue中进行引用即可,City.vue中的代码如下:
接着在src/pages/home/compontents文件夹中新建Header.vue文件里面的代码如下:
城市选择
注意一下以下代码片段:
其实就是点击左边的箭头页面跳转至首页:
![176aba166914cbf108be296be3834731.png](https://i-blog.csdnimg.cn/blog_migrate/3adfbd1769a2e2d422091a30e1873a58.jpeg)
注意到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文件开始修改样式:
之后的效果如图:
![c92edc718087ddf0cfcbe6cdb0569f98.png](https://i-blog.csdnimg.cn/blog_migrate/d52ad27139db356960bd579db8b98fde.jpeg)
关于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组件。仔细看现在的样子:
![6626178524918431bfba0edc684cc19c.png](https://i-blog.csdnimg.cn/blog_migrate/f2ed2af2855e3048ed9abcadbaa098be.jpeg)
现在我们已经把Header和Search组件所占用的空间给让出来了,但是有一个问题就是红色区域是list类所能显示的范围,也就是说红色区域后面的都是显示不了的:
![05997990d081dec0ca5bc2c12d457338.png](https://i-blog.csdnimg.cn/blog_migrate/4e8928b1458624df36e851f90dfd9e28.jpeg)
有人可能会问怎么显示不了,因为红色区域就是
.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结构应当类似如下结构:
... ... ...