1.完成情况
- 对首页只开发知识进行梳理
- 了解es6
- 列表页基础功能开发
1.页面头部样式
2.城市列表样式设计
3.城市列表动态显示
4.导航栏功能
5.列表滑动功能
2.重点以及特殊问题记录
1.首页开发重点补充
改变数据时候,常在生命周期函数里面的mounted中进行调用,通常不再在created中进行调用,会导致数据丢失
在数组[x]=[]可产生二维数组,在通过push添加数据
computed: {
pages () {
const pages = []
this.list.forEach((item,index) => {
const page = Math.floor(index / 8)
if (!pages[page]) {
pages[page] = []
}
pages[page].push(item)
})
return pages;
}
}
2.城市列表页面开发(头部)
采用定位的方式对返回图标进行定位,无法采用float,float:left后依然会占据原本的数据流, height: .86rem line-height: .86rem text-align: center这样居中显示回应为float的原因所以导致了显示偏移,样式记录
<style lang="stylus" scoped>
@import '~style/varibles.styl'
.header
position: relative
overflow: hidden
height: .86rem
line-height: .86rem
text-align: center
color: #fff
background: $bgColor
font-size: .32rem
.back-city
position: absolute
top: 0
left: 0
width: .64rem
font-size: .4rem
text-align: center
color: #fff
</style>
2.城市列表页面开发(搜索框)
使用padding调整位置后导致搜索框偏移,因为采用了text-aglin进行居中,所以 使用box-sizing: border-box使添加的padding包含在width之中进行调整
<style lang="stylus" scoped>
@import '~style/varibles.styl'
.search
padding: 0 .2rem
height: .72rem
background: $bgColor
.searchinput
box-sizing: border-box
height: .62rem
width: 100%
padding:0 .1rem
line-height: .62rem
text-align: center
border-radius: .06rem
color: #666
</style>
3.城市列表页面开发(列表)
使用Bscroll进行设计,Bscroll提供了页面滚动样式。显示更加美观,
官方规定使用需要有两层包裹,所以添加了一个在最外层的里面所有层添加了一个新的div,包裹所有元素
<template>
<div class="list" ref="wrapper">
<div>
<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"
v-for="item of hot"
:key="item.id"
>
<div class="button">{{item.name}}</div>
</div>
</div>
</div>
<div class="area"
v-for="(item, key) of cities"
:key="key"
:ref="key"
>
<div class="title border-topbottom">{{key}}</div>
<div class="item-list">
<div
class="item border-bottom"
v-for="innerItem of item"
:key="innerItem.id"
>
{{innerItem.name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
name: 'CityList',
props: {
hot: Array,
cities: Object,
letter: String
},
watch: {
letter () {
if (this.letter) {
const element = this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
}
}
},
mounted () {
this.scroll = new Bscroll(this.$refs.wrapper)
}
}
</script>
<style lang="stylus" scoped>
@import '~style/varibles.styl'
.border-topbottom
&:before
border-color: #ccc
&:after
border-color: #ccc
.border-bottom
&:before
border-color: #ccc
.list
overflow: hidden
position: absolute
top: 1.58rem
left: 0
right: 0
bottom: 0
.title
line-height: .54rem
background: #eee
padding-left: .2rem
color: #666
font-size: .26rem
.button-list
overflow: hidden
padding: .1rem .6rem .1rem .1rem
.button-wrapper
float: left
width: 33.33%
.button
margin: .1rem
padding: .1rem 0
text-align: center
border: .02rem solid #ccc
border-radius: .06rem
.item-list
.item
line-height: .76rem
padding-left: .2rem
</style>
4.城市列表页面开发(导航栏)
采用列表进行显示导航栏,用绝对定位放置到右边。
点击跳转至相应页面的字母开头块,使用的兄弟组件传递数据,先传给父组件,父组件再传给子组件的操作,由于路线不复杂所以不采用总线进行数据传递
Bscroll提供了一个跳转的方法scrollToElement,将dom传入即可显示相应的页面
在div中使用ref进行动态的dom绑定,给每一个字母显示都进行的标注,传入后调用方法进行跳转
<template>
<div class="list" ref="wrapper">
<div>
<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"
v-for="item of hot"
:key="item.id"
>
<div class="button">{{item.name}}</div>
</div>
</div>
</div>
<div class="area"
v-for="(item, key) of cities"
:key="key"
:ref="key"
>
<div class="title border-topbottom">{{key}}</div>
<div class="item-list">
<div
class="item border-bottom"
v-for="innerItem of item"
:key="innerItem.id"
>
{{innerItem.name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
name: 'CityList',
props: {
hot: Array,
cities: Object,
letter: String
},
watch: {
letter () {
if (this.letter) {
const element = this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
}
}
},
mounted () {
this.scroll = new Bscroll(this.$refs.wrapper)
}
}
</script>
<style lang="stylus" scoped>
@import '~style/varibles.styl'
.border-topbottom
&:before
border-color: #ccc
&:after
border-color: #ccc
.border-bottom
&:before
border-color: #ccc
.list
overflow: hidden
position: absolute
top: 1.58rem
left: 0
right: 0
bottom: 0
.title
line-height: .54rem
background: #eee
padding-left: .2rem
color: #666
font-size: .26rem
.button-list
overflow: hidden
padding: .1rem .6rem .1rem .1rem
.button-wrapper
float: left
width: 33.33%
.button
margin: .1rem
padding: .1rem 0
text-align: center
border: .02rem solid #ccc
border-radius: .06rem
.item-list
.item
line-height: .76rem
padding-left: .2rem
</style>
下周任务
由于回老家,网速不行,计划可能会无法正常完成,依然是按顺序进行任务
- 列表页面的搜索功能完成
- 完成列表页面跳转主界面并主页显示相应内容
- 主界面的滚动栏点击进入后的具体页面
- 主界面功能进入后的具体页面
- 主页周末去哪玩以及热门的具体页面