better-scroll在vue中的应用

　　

在我们日常的移动端项目开发中处理滚动列表是再常见不过的需求了以滴滴为例可以是这样竖向滚动的列表如图所示

微信→钱包→滴滴出行”体验效果。

什么是better-scroll better-scroll是一个移动端滚动的解决方案它是基于iscroll的重写它和iscroll的主要区别在,这里,.better-scroll也很强大不仅可以做普通的滚动列表还可以做轮播图,选择器等等。

不少同学可能用过better-scroll我收到反馈最多的问题是

,

不能滚动是现象我们得搞清楚这其中的根本原因。在这之前我们先来看一下浏览器的滚动原理

那么对于better-scroll也是一样的道理我们先来看一下better-scroll常见的html结构

 & lt; div 类="包装"祝辞,,& lt; ul 类=澳谌荨痹?,,,& lt; li>……& lt;/li>,,,, & lt; li>……& lt;/li>
　　,,,,,,& lt;/ul>
　　& lt;/div> 

为了更加直观我们再来看一张图

,

固定的高度,。×××部分为内容它是父容器的第一个子元素它的高度会随着内容的大小而撑高。那么当内容的高度不超过父容器的高度是不能滚动的而它一旦超过了父容器的高度我们就可以滚动内容区了这就是better-scroll的滚动原理。

进口BScroll 得到“better-scroll”,让包装=,document.querySelector (“.wrapper”),让滚动=,新BScroll(包装,{})

better-scroll的文档,。

scroll.refresh(),方法重新计算来确保滚动效果的正常。所以同学们反馈的better-scroll不能滚动的原因,多半是初始化better-scroll的时机不对或者是当DOM结构发送变化的时候并没有重新计算better-scroll 。

Vue.js 都不陌生当better-scroll遇见Vue会擦出怎样的火花呢

很多同学开始接触使用better-scroll都是受到了我的一门教学课程,,《Vue.js高仿饿了么外卖应用》,的影响。在那门课程中我们把better-scroll和Vue做了结合实现了很多列表滚动的效果。在Vue中的使用方法如下

,

 & lt; template>,, & lt; div 类=鞍捌鳌?ref=鞍捌鳌痹?,,,& lt; ul 类=澳谌荨痹?,,,,,& lt; li>……& lt;/li>,,,,,, & lt; li>……& lt;/li>
　　,,,,,,,,,,& lt;/ul>,, & lt;/div> & lt;/template> & lt; script>
　　import 才能;BScroll 得到‘better-scroll’,, export  default  {
　　,,,安装(),{,,,,,这个。nextTick美元((),=祝辞,{,,,,,,,this.scroll =, new  Bscroll(这一点。refs.wrapper美元,,{})
　　,,,,,})
　　,,,}
　　}& lt;才能/script> 

js提供了我们一个获取DOM对象的接口——,vm。refs 美元。在这里我们通过了,这个。refs.wrapper 美元;访问到了这个DOM对象并且我们在安装这个钩子函数里,这个。nextTick 美元的回调函数中初始化better-scroll。因为这个时候DOM包装器的已经渲染了我们可以正确计算它以及它内层内容的高度以确保滚动正常。

。nextTick 美元;是一个异步函数为了确保DOM已经渲染感兴趣的同学可以了解一下它的,内部实现细节,底层用到了MutationObserver或者是,setTimeout (fn, 0),。其实我们在这里把,这个。nextTick 美元;替换成,setTimeout (fn, 20),也是可以20的女士是一个经验值每一个滴答约为17对女士用户体验而言都是无感知的。

在我们的实际工作中列表的数据往往都是异步获取的因此我们初始化better-scroll的时机需要在数据获取后代码如下

,

 & lt; template>,, & lt; div 类=鞍捌鳌?ref=鞍捌鳌痹?,,,& lt; ul 类=澳谌荨痹?,,,,,& lt; li  v=癷tem 拷贝数据”在“项目”& lt;/li>,,,, & lt;/ul>,, & lt;/div> & lt;/template> & lt; script>
　　import 才能;BScroll 得到‘better-scroll’,, export  default  {
　　,,,的数据(),{,,,,,return {,,,,,,,数据:,[]
　　,,,,,}
　　,,,},
　　,,,()创建的,{
　　,,,,,requestData(),然后((res),=祝辞,{,,,,,,,this.data =, res.data ,,,,,,,, nextTick美元((),=祝辞,{,,,,,,,,,this.scroll =, new  Bscroll(这一点。refs.wrapper美元,,{})
　　,,,,,,,})
　　,,,,,})
　　,,,}
　　}& lt;才能/script> 

axios 或者,vue-resource 。我们获取到数据的后需要通过异步的方式再去初始化better-scroll因为Vue是数据驱动的Vue数据发生变化,这一点。data=https://www.yisu.com/zixun/res.data到页面重新渲染是一个异步的过程我们的初始化时机是要在DOM重新渲染后所以这里用到这了。美元nextTick当然替换成setTimeout (fn, 20)也是可以的。

数据改变→DOM重新渲染仍然是一个异步过程,所以即使在我们拿到数据后也要异步初始化better-scroll。

better-scroll在vue中的应用