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

女爷i 2022-02-27 10:12 291阅读 0赞

先展示下预期效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

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

.list
        overflow: hidden
        position: absolute

这导致了页面无法滚动。

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

[https://github.com/ustbhuangyi/better-scroll][https_github.com_ustbhuangyi_better-scroll]

使用方式是：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 3][]

2. 导入better-scroll

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 4][]

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

接着创建该对象

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

好了。回正题= =

创建城市列表字母滚动条 原理其实就是：建组件。然后组件写样式。 加入到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][http_www.runoob.com_cssref_css3-pr-flex-direction.html]

justify-content：

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220227/e8be7737f3164dd8b09151b6cdf3de51.png
[https_github.com_ustbhuangyi_better-scroll]: https://github.com/ustbhuangyi/better-scroll
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1]: /images/20220227/9b297354f05842dfb5e067ecdcee2596.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190327134209265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 3]: /images/20220227/1456dce4861040cdb71c9d0298872513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 4]: /images/20220227/e3db0409904a4bca951787e20f71fa28.png
[http_www.runoob.com_cssref_css3-pr-flex-direction.html]: http://www.runoob.com/cssref/css3-pr-flex-direction.html