城市右侧字母表的循环原理:新建一个组件,然后通过样式将组件定位到右侧显示即可
1、字母表组件
//Alphabet.vue
<template>
<ul class="list">
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</li>
<li class="item">A</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
//设置字母表的位置在靠右,宽度,和距离顶部的距离
position: absolute
right: 0
top: 1.58rem
bottom: 0
width: .4rem
.item
// 设置字母居中和间距
line-height: .4rem
text-align: center
color: $bgColor
</style>
2、城市组件
<template>
<div>
<city-header></city-header>
<city-search></city-search>
<city-list></city-list>
<city-alphabet></city-alphabet>
</div>
</template>
<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
//就这货
import CityAlphabet from './components/Alphabet'
export default {
name: 'City',
components: {
CityHeader,
CitySearch,
CityList,
CityAlphabet
}
}
</script>
<style>
</style>
3、样式说明
flex-direction: 表示弹性盒子中的元素的排列顺序。可以按行,或按列,或者按行但是反向排序,或者按列反向排序。 在咱们代码中是按列表徐。 不过使用这个参数的前提是需要有加display: flex参数(设置为弹性盒子) 不然无效。
可参考:http://www.runoob.com/cssref/css3-pr-flex-direction.html
justify-content:用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 如果使用 align-content 属性对齐交叉轴上的各项(垂直)。也就是元素的水平对齐方式 是左对齐还是右对齐还是居中对齐还是两端对齐还是环绕对齐。咱们代码中是center也就是水平居中对齐各个元素。