跟我一起做一个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 ...
随机推荐
- 第二周课堂笔记1th
1. 三元运算 + 2. for循环 for为有限循环,while为无限循环 可迭代对象:是字符串,数字不可以 数字不可以迭代但是可以用range函数 for i in range(1 ...
- vue qs插件的使用
参考:https://blog.csdn.net/weixin_43851769/article/details/86505164 qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库. 步 ...
- 跟我一起使用socket.io创建聊天应用
安装express插件 新建index.js var app = require('express')(); var http = require('http').Server(app); app.g ...
- C++ 系列：C++ 内存布局
1 前言 了解你所使用的编程语言究竟是如何实现的,对于C++程序员可能特别有意义.首先,它可以去除我们对于所使用语言的神秘感,使我们不至于对于编译器干的活感到完全不可思议:尤其重要的是,它使我们在De ...
- 环信Demo 导入错误
今天想导入环信的Demo 去看一看环信学习一下 谁知道导入出现这么个问题 Error:(1, 0) Minimum supported Gradle version is 3.3. Current v ...
- Clover config.plist Boot部分
<key>Boot</key> <dict> <key>Arguments</key> < nv_disable= kext-dev- ...
- Entity Framework Extended 批量删除
public static class DbContextExtensions { public static void DeleteBatch<T>(this DbContext con ...
- Android基础控件ScrollView滚动条的使用
1.简介 ScrollView是一个FrameLayout的容器,不过在他的基础上添加了滚动,允许显示的比实际多的内容!另外,只能够往里面放置一个子元素,可以是单一的组件,又或者一个布局包裹着的复杂的 ...
- Hibernate 查询语言
查询语言 Hibernate 查询语言(HQL)是一种面向对象的查询语言,类似于 SQL,但不是去对表和列进行操作,而是面向对象和它们的属性. HQL 查询被 Hibernate 翻译为传统的 SQL ...
- 如何提高Axure设计的效率 提高Axure设计效率的10条建议
如何更有效率的使用axure,这是新手需要掌握的技能.本文作者从实际经验中归纳出来的十条建议十分值得学习,转载分享给大家: Axure 是创建软件原型的快速有力的工具.上手很容易,但是,其中存在一个危 ...