Vue2.5 学习笔记 8.4 城市列表页字母滚动条

先展示下预期效果：

在做这个之前要先解决一个问题。因为在上一个学习章节中将整个列表组件添加了这两个样式：

  .list
    overflow: hidden
    position: absolute

这导致了页面无法滚动。

解决这个问题的办法是添加第三方滚动组件：better-scroll 这个组件能够帮我们实现上下滚动页面的样式

https://github.com/ustbhuangyi/better-scroll

使用方式是：

1.先安装 npm install better-scroll --save

然后根据她文档要求在list类的div元素外再包裹一层div标签：

2. 导入better-scroll

根据文档的说明 使用better-scroll 其实是创建Bscroll对象。而这个对象需要传入一个DOM：

所以需要先获取到页面的DON元素内容

<template>
  <div class="list" ref="wrapper">
    <div>

接着创建该对象

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  }
}
</script>

这样就完成了页面滚动的优化

好了。回正题= =

创建城市列表字母滚动条 原理其实就是：建组件。然后组件写样式。 加入到City.vue中。即可

直接上代码来的简单些：

建组件：

<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>

然后去写样式

//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>

这样就完成了。

部分CSS样式参数说明（前端渣）：

flex-direction:  

    表示弹性盒子中的元素的排列顺序。可以按行，或按列，或者按行但是反向排序，或者按列反向排序。 在咱们代码中是按列表徐。 不过使用这个参数的前提是需要有加display: flex参数(设置为弹性盒子) 不然无效。

可参考：http://www.runoob.com/cssref/css3-pr-flex-direction.html

justify-content：

    用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 如果使用 align-content 属性对齐交叉轴上的各项（垂直）。

也就是元素的水平对齐方式 是左对齐还是右对齐还是居中对齐还是两端对齐还是环绕对齐。咱们代码中是center也就是水平居中对齐各个元素。

 

至此： City组件中的所有子组件的CSS样式全部写好。 教程说下一节开始讲逻辑。拭目以待咯