vue使用better-scroll插件实现原生app的拖拽效果,并解决初始化页面时拖拽失效的问题

better-scroll插件要求，要拖拽的内容必须有两个div，外层div包裹，第二层div为正真要拖拽的内容

滚动到指定元素：

解决拖拽失效的方法：

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