原生的滚动容易造成卡顿、不流畅，为了优化这个问题Better Scroll应运而生。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
学前必看
Better Scroll默认工作机制：外层有个wrapper框框，代表可见范围，滚动的内容放在wrapper内的content里。
话不多说，直接上代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<style>
.wrapper{
height: 400px;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- <button class="btn">按钮</button> -->
<ul class="content">
<button class="btn">按钮</button>
<li>列表数据1</li>
<li>列表数据2</li>
<li>列表数据3</li>
<li>列表数据4</li>
<li>列表数据5</li>
<li>列表数据6</li>
<li>列表数据7</li>
<li>列表数据8</li>
<li>列表数据9</li>
<li>列表数据10</li>
<li>列表数据11</li>
<li>列表数据12</li>
<li>列表数据13</li>
<li>列表数据14</li>
<li>列表数据15</li>
<li>列表数据16</li>
<li>列表数据17</li>
<li>列表数据18</li>
<li>列表数据19</li>
<li>列表数据20</li>
<li>列表数据21</li>
<li>列表数据22</li>
<li>列表数据23</li>
<li>列表数据24</li>
<li>列表数据25</li>
<li>列表数据26</li>
<li>列表数据27</li>
<li>列表数据28</li>
<li>列表数据29</li>
<li>列表数据30</li>
<li>列表数据31</li>
<li>列表数据32</li>
<li>列表数据33</li>
<li>列表数据34</li>
<li>列表数据35</li>
<li>列表数据36</li>
<li>列表数据37</li>
<li>列表数据38</li>
<li>列表数据39</li>
<li>列表数据40</li>
<li>列表数据41</li>
<li>列表数据42</li>
<li>列表数据43</li>
<li>列表数据44</li>
<li>列表数据45</li>
<li>列表数据46</li>
<li>列表数据47</li>
<li>列表数据48</li>
<li>列表数据49</li>
<li>列表数据50</li>
<li>列表数据51</li>
<li>列表数据52</li>
<li>列表数据53</li>
<li>列表数据54</li>
<li>列表数据55</li>
<li>列表数据56</li>
<li>列表数据57</li>
<li>列表数据58</li>
<li>列表数据59</li>
<li>列表数据60</li>
<li>列表数据61</li>
<li>列表数据62</li>
<li>列表数据63</li>
<li>列表数据64</li>
<li>列表数据65</li>
<li>列表数据66</li>
<li>列表数据67</li>
<li>列表数据68</li>
<li>列表数据69</li>
<li>列表数据70</li>
<li>列表数据71</li>
<li>列表数据72</li>
<li>列表数据73</li>
<li>列表数据74</li>
<li>列表数据75</li>
<li>列表数据76</li>
<li>列表数据77</li>
<li>列表数据78</li>
<li>列表数据79</li>
<li>列表数据80</li>
<li>列表数据81</li>
<li>列表数据82</li>
<li>列表数据83</li>
<li>列表数据84</li>
<li>列表数据85</li>
<li>列表数据86</li>
<li>列表数据87</li>
<li>列表数据88</li>
<li>列表数据89</li>
<li>列表数据90</li>
<li>列表数据91</li>
<li>列表数据92</li>
<li>列表数据93</li>
<li>列表数据94</li>
<li>列表数据95</li>
<li>列表数据96</li>
<li>列表数据97</li>
<li>列表数据98</li>
<li>列表数据99</li>
<li>列表数据100</li>
</ul>
</div>
//引入bs
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>
<script>
console.log(BetterScroll)
// 1.创建BScroll对象;默认不会监听实时滚动位置;默认会阻止浏览器原生click事件
// probe:侦测，
// 0,1都不侦测实时位置
// 2：在手指滚动的过程中侦测，手指离开后的惯性滚动不侦测
// 3：只要滚动都侦测
// click:是否进行点击
// true:可以进行点击
// pullUpLoad:到底后，是否上拉加载更多
let wrapper = document.querySelector('.wrapper')
let bs = BetterScroll.createBScroll(wrapper,{
probeType: 3,
click: true,
pullUpLoad: true,
})
// 2.进行检测滚动位置
bs.on('scroll',(position) => {
// console.log(position)
})
// 3.监听上拉事件
bs.on('pullingUp', () => {
console.log('上拉加载更多')
setTimeout(() => {
bs.finishPullUp()
}, 2000);
})
//设置按钮可点击
document.querySelector('.btn').addEventListener('click', function(){
console.log('-------')
})
</script>
</body>
</html>
vue封装BS
<template>
<div class="wrapper" ref="wrapper">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
BScroll.use(PullUp)
export default {
name: "Scroll",
props: {
probeType: {
type: Number,
default: 0
},
pullUpLoad: {
type: Boolean,
default: false
}
},
data() {
return {
scroll: null,
message: '哈哈哈'
}
},
mounted() {
// 1.创建BScroll对象
this.scroll = new BScroll(this.$refs.wrapper, {
click: true,
probeType: this.probeType,
pullUpLoad: this.pullUpLoad
})
// 2.监听滚动的位置
this.scroll.on('scroll', (position) => {
// console.log(position);
this.$emit('scroll', position)
})
// 3.监听上拉事件
if(this.probeType===2 ||this.probeType===3){
this.scroll.on('pullingUp', () => {
// console.log("上拉加载更多");
this.$emit('pullingUp');
})
}
},
methods: {
scrollTo(x, y, time=300) {
this.scroll.scrollTo(x, y, time)
},
finishPullUp() {
setTimeout(()=>{
this.scroll.finishPullUp()
},2000)
},
refresh(){
this.scroll.refresh()
// console.log('111')
}
}
}
</script>
<style scoped>
</style>
可能遇到的问题
Better-Scroll在决定有多少区域可以滚动时,是根据scrollerHeight属性决定，而scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度
但是我们的首页中,刚开始在计算scrollerHeight属性时,是没有将图片计算在内的。所以,计算出来的告诉是错误的(1300+)
后来图片加载进来之后有了新的高度,但是scrollerHeight属性并没有进行更新.。所以滚动出现了问题
如何解决这个问题了?
监听每一张图片是否加载完成,只要有一张图片加载完成了,执行一次scroll的refresh()