解决页面无法滚动——BetterScroll的使用

BetterScroll的使用

1、终端安装better-scroll

npm install better-scroll —save
//或指定版本安装
npm install better-scroll@1.15.2 --save

2、代码需要符合如下Html结构

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- you can put some other DOMs here, it won't affect the scrolling-->
</div>

3、通过ref传DOM结构

//通过ref传DOM结构
<div class="list" ref="wrapper”>
<!-- 此处插入上面的HTML结构 -->
</div>

<script>
//引入插件
import Bscroll from 'better-scroll'
export default{
    name:'CityList', //组件名称
    mounted (){
        //在生命周期函数mounted挂载完页面后执行调用
        this.scroll = new Bscroll(this.$refs.wrapper)
    }
}
</script>

题外话：字母表布局stylus样式笔记

建立City的字母表组件Alphabet.vue (city文件夹下建立components文件夹里建立Alphabet.vue)

//实现页面固定垂直布局
.list
        display flex
        flex-direction column
        justify-content center
        position absolute
        top 1.58rem
        right 0
        bottom 0
        width .4rem