利用Better-Scroll实现滚动+解决滚动失效问题

Better-Scroll的使用

Better-Scroll的中文文档
http://ustbhuangyi.github.io/better-scroll/doc/
Better-Scroll的github网址
https://github.com/ustbhuangyi/better-scroll/tree/master
首先按照网址上的提示先安装这个包

npm install better-scroll -S # install 1.x
npm install better-scroll@next -S # install 2.x，with full-featured plugin.

我们的Dom元素必须满足下列结果才可以使用Better-Scroll，即在滑动展示的元素外需要包裹两层。

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

因此我们在滑动展示的元素外包裹了两层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" @click="nowhandleCityClick" >{{this.currentCity}}</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" :k="item.id" @click="handleCityClick(item.name)">
                        <div class="button">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <!-- 对象也可被v-for循环，第二项不是index而是key -->
            <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" @click="handleCityClick(innerItem.name)">{{innerItem.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

引入better scroll，在mounted声明周期钩子内new一个实例，并传入ref数据。

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

Scroll多页面互相影响的问题

注：在页面跳转时，如果前一页面滚动到了下部，跳转的页面也会以下部为起点进行展示，出现页面直接互相干扰的情况。为了防止这种情况出现，我们在router/index.js中加入以下代码，使得每次页面发生跳转之后，下一页面从最上部为起点进行查看。

export default new Router({
    // 页面切换时始终回到最顶部
    scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
}
})

解决滚动失效问题

在使用better-scroll的过程中，出现了各种各样的bug。

首先是页面加载出来不能滚动的问题，经过百度，我们发现网上多数材料都在说子元素的高度必须要大于父元素才能实现滚动。最开始，笔者认为自己的列表很长，不会存在这个问题，但实际上正是这个问题导致了最开始初始化scroll实例后不能进行滚动。
为什么明明列表很长却不能进行滚动呢？
其实这是因为我们使用axios读取数据，这是异步读取数据的方式。我们在写代码的时候希望父组件把数据读取到之后，再传递给子组件。然而，由于异步读取的方式，值还没有读取到，我们的子组件的mounted生命周期函数就已经执行了，因此，实际上在初始化的时候，我们的列表还是空的，这也就导致了子元素的高度小于父元素的高度。
如何解决这一问题呢？
我们可以使用updated生命周期函数。当data发生变化，updated会执行，调用scroll.refresh()方法。

    updated () {
        this.bs.refresh()
    },

refresh()
参数：无
返回值：无
作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。

上述问题解决之后，页面第一次加载出来可以滚动了，但是我们要做得是一个城市选择的页面，当我们选择完城市返回首页时，如果我们再次进入列表页会发现又一次不能滚动了。

需要滚动效果的列表页

这个过程中，我们改变了选择的城市，updated生命周期函数自动执行，refresh了数据，看起来没有问题。但是再次返回列表页不能滚动是为什么呢？
这是因为better-scroll的列表隐藏问题。
当我们的列表隐藏起来（页面发生跳转不再停留在列表页的时候），Better-Scroll把控制页面滑动的几个关键属性置成了如下图所示。

image.png

updated中的refresh函数在我们改变城市退出列表页面时执行。如此，当我们再次进入列表页面的时候，列表子元素的height=0，且hasVerticalScroll=false，因此滚动失败。
所以，我们需要再引入一个activated生命周期函数，在每次进入页面时执行refresh，获取数据，才能执行滚动操作。

    activated(){
        this.bs.refresh()
    }

这样问题就得到解决啦！